react-native - React-Native React-Navigation - 使用 createDrawerNavigator() 不会呈现组件标题

Question

我正在尝试使用 react-navigation 抽屉导航器为组件实现标题，但使用 createDrawerNavigator() 方法会导致标题被完全删除。

使用官方 react-navigation v3 'simple-header-button' 小吃（在https://snack.expo.io/@react-navigation/simple-header-button-v3），createStackNavigator() 方法可以很好地呈现标题，但只需将 createStackNavigator() 更改为 createDrawerNavigator() 即可将其删除。

文档没有从 v2 更改以反映可能导致此问题的任何潜在更改，这无济于事，但显然应用标题的方法在两种导航方法之间并不相同。

（不包括我自己的代码，因为官方小吃演示了这个问题）。

Answer 1

如果你想在 stackNavigator 中添加一个drawerNavigator，或者任何一般的东西，实现标题和自定义它们的最简单方法是通过react-native-elements使用Header组件

只需将组件添加到您想要标题的每个屏幕。然后添加header:null到 stackNavigator 中，否则会显示两个标题。

下面的例子：

<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>