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

【问题标题】：React-Native React-Navigation - Using createDrawerNavigator() renders no component headerReact-Native React-Navigation - 使用 createDrawerNavigator() 不会呈现组件标题
【发布时间】：2019-07-22 05:16:00
【问题描述】：

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

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

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

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

【问题讨论】：

你解决了吗？

标签： react-native react-navigation react-navigation-drawer

【解决方案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>

【讨论】：

这并没有真正解决为什么标题没有像反应导航那样显示的问题。这应该由导航器配置处理，并且是我帖子中讨论的方法。