如何从 React Native 中的 React Navigation 禁用 createDrawerNavigator 中的标头

Question

背景

在构建 React Native 应用程序并使用来自 React Navigation 的 DrawerNavigator 时，我最终需要自定义带有 createDrawerNavigator 的标题。我发现我可以自定义一个createStackNavigator。

createStackNavigator

1. 可以隐藏标题
2. 可以自定义标题。

createDrawerNavigator

1. 不能隐藏标题
2. 无法自定义标题。

问题

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

示例

createStackNavigator

我可以像这样隐藏使用createStackNavigator时出现的标题，

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

createDrawerNavigator

当使用createDrawerNavigator 时，我尝试隐藏或自定义标题。我还搜索了文档，但找不到任何关于如何处理 React Native 导航版本 3 中 createDrawerNavigator 的标头的内容。

Answer 1

此代码将有助于自定义抽屉组件的标题无。

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 来隐藏抽屉导航器和堆栈导航器的标题。这样做的问题是您最终根本没有标题。

因此，如果您想要特定屏幕的标题，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 上隐藏标题，然后将组件添加到您确实想要标题的每个屏幕上。