IT技术 - 指定自定义 DrawerNavigator 标头 - 吾爱随笔录

我正在使用 DrawerNavigator 和 StackNavigator

const AppDrawer = DrawerNavigator(
  {
    Inbox: {
      path: '/',
      screen: WelcomeContainer,
    },
    Drafts: {
      path: '/sent',
      screen: SettingsContainer,
    },
  },
  {
    initialRouteName: 'Inbox',
    contentOptions: {
      activeTintColor: '#e91e63',
    },
  }
);


const AppNavigator = StackNavigator({
  Home: {
    screen: AppDrawer,
    navigationOptions: ({navigation}) => ({
      header: false
    })
  },
  Settings: {
  screen: SettingsContainer,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
},
  About: {
  screen: About,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
}
})

对于单击抽屉的每个元素，我想始终显示相同的标题。我正在使用react-native-elements 中的自定义标头。我使用此代码在 WelcomeContainer 组件中实现它

render() {
<Header
  leftComponent={<MyCustomLeftComponent />}
  centerComponent={<MyCustomCenterComponent />} 
  rightComponent={<MyCustomRightComponent />}
/>
}

我是否应该在每个组件中重新编写此代码，我希望它具有标题，或者是否可以在DrawerNavigator.

const AppDrawer = DrawerNavigator( { Inbox: { path: '/', screen: WelcomeContainer, }, Drafts: { path: '/sent', screen: SettingsContainer, }, }, { navigationOptions: { header: null }, // <--- add this initialRouteName: 'Inbox', contentOptions: { activeTintColor: '#e91e63', }, } ); // simple HOC const withHeader = (WrappedComponent) => { return class WithHeader extends React.Component { render() { return ( <View style={{ flex: 1 }}> <Header leftComponent={<MyCustomLeftComponent />} centerComponent={<MyCustomCenterComponent />} rightComponent={<MyCustomRightComponent />} /> <WrappedComponent {...this.props} /> </View> ) } } } const AppNavigator = StackNavigator({ Home: { screen: withHeader(AppDrawer), // <------ wrap the drawer navigationOptions: ({ navigation }) => ({ header: false }) }, Settings: { screen: SettingsContainer, navigationOptions: ({ navigation }) => ({ title: navigation.state.params.title }) }, About: { screen: About, navigationOptions: ({ navigation }) => ({ title: navigation.state.params.title }) } })