如何在 React Native 的 React Navigation 中禁用 createDrawerNavigator 中的 header

Question

背景

在构建 React Native 应用程序并使用 React Navigation 中的 DrawerNavigator 时，我最终需要自定义 createDrawerNavigator 附带的 header。不过我发现我可以自定义 createStackNavigator。

createStackNavigator

可以隐藏header
可以自定义header。

createDrawerNavigator

无法隐藏 header
无法自定义 header。

问题

如何隐藏或自定义在使用来自 React Navigation 的 createDrawerNavigator 时自动添加到我的应用程序的 header？

例子

createStackNavigator

我可以这样隐藏使用createStackNavigator时出现的header,

const Secure = createStackNavigator(
  {
    Drawer: {
      screen: drawer,
    },
  },
  {
    initialRouteName: 'Drawer',
    headerMode: 'none',
  },
);

createDrawerNavigator

当使用 createDrawerNavigator 时，我没有尝试隐藏或自定义 header。我还搜索了文档，但找不到任何关于如何处理 createDrawerNavigator.

的 React Native 导航版本 3 中的 header 的内容

Answer 1

此代码将有助于 header none 自定义抽屉组件。

const customDrawerContentComponent = (props) => {
   Contact: { 
    screen: ContactScreen ,
    navigationOptions: () => ({
      header: null
    })
   }
}



const AppDrawerNavigator = createDrawerNavigator({
  Home: { 
    screen: HomeScreen,
    navigationOptions: () => ({
       header: null
    })
  }
}, {
  contentComponent: customDrawerContentComponent,
})

Answer 2

就像 Kazi 的回答所说，您可以通过 headerMode: null 来隐藏 drawerNavigators 和 stacknavigator 中的 header。这样做的问题是您最终根本没有 headers。

因此，如果您想要针对特定屏幕使用 header，header 组件 react-native-elements，您可以将其添加到您想要 header 的每个屏幕。

这是一个例子：

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>

在这个例子中，我不得不把它包装在 React.Fragment 标签上，因为我把这部分代码放在了 render 方法的开头。我还在屏幕上添加了一个标题和打开抽屉的汉堡包按钮。

所以，基本上我所做的是，在 stackNavigators 和 drawerNavigators 上隐藏 header，然后将组件添加到您确实想要 header 的每个屏幕。

如何在 React Native 的 React Navigation 中禁用 createDrawerNavigator 中的 header

How to disable header in createDrawerNavigation from Reac Navigation in React Native

javascript

react-native

react-native-navigation