React-Native React-Navigation - 使用 createDrawerNavigator() 不渲染组件头

Question

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

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

文档未从 v2 更改以反射(reflect)可能导致此问题的任何潜在更改，但显然两种导航方法之间应用 header 的方法不同。

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

Answer 1

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

只需将组件添加到您希望页眉所在的每个屏幕。然后将 header:null 添加到您的 stackNavigator 中，否则将显示两个 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>