Question

背景

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

createStackNavigator

可以隐藏标题
可以自定义标题。

createDrawerNavigator

无法隐藏标题
无法自定义标题。

问题

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

示例

createStackNavigator

我可以隐藏使用createStackNavigator这样的标题，

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

createDrawerNavigator

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

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

因此，如果您想要特定屏幕的标题，则在 react-native-elements 上有一个 header 组件，您可以将其添加到要在其上显示标题的每个屏幕。 / p>

这是一个例子：

<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和抽屉导航器上隐藏标题，然后将组件添加到您确实希望在其上显示标题的每个屏幕。

如何从React Native的Reac导航中禁用createDrawerNavigation中的标头

2 个答案: