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>