指定自定义 DrawerNavigator 标头答案

【问题标题】：Specify a custom DrawerNavigator header指定自定义 DrawerNavigator 标头
【发布时间】：2017-10-18 09:57:54
【问题描述】：

我正在使用 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 中指示标头，如果可以，如何？

【问题讨论】：

标签： reactjs react-native navigation-drawer

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

【讨论】：