指定自定义抽屉导航器标题

Question

我正在使用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
  })
}
})

对于单击抽屉的每个元素，我想始终显示相同的标题。我正在使用来自反应原生元素的自定义标头。我用这段代码在欢迎容器组件中实现它

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

我

应该在我想要的每个组件中重写此代码，让它有标题，还是可以在DrawerNavigator中指示标题，如果是，如何？

Answer 1

我遇到了同样的问题，并做了以下操作：

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
    })
  }
})