Question

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

使用官方的react-navigation v3“简单标题按钮”小吃（位于https://snack.expo.io/@react-navigation/simple-header-button-v3），createStackNavigator（）方法可以很好地显示标题，但是只需将createStackNavigator（）更改为createDrawerNavigator（）即可将其删除。

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

（由于官方小吃展示了此问题，因此未包含我自己的代码）。

Answer 1

如果要在stackNavigator或其他常规内容中添加抽屉式导航器，实现标头和自定义标头的最简单方法是通过 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>

React-Native React-Navigation-使用createDrawerNavigator（）不会渲染组件头

1 个答案: