指定自定义DrawerNavigator标头 [英] Specify a custom DrawerNavigator header

问题描述

我正在使用DrawerNavigator和StackNavigator

I am using a DrawerNavigator and a 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组件中实现了该代码

For each element clicked on the drawer I want to show always the same header. I am using a custom header from react-native-elements. I implement it in the WelcomeContainer component with this code

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

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

Shall I re-write this code in every component I want to it have the header or is it possible to indicate the header in DrawerNavigator, and if yes how?

推荐答案

我遇到了同样的问题，并且执行了以下操作:

I had the same problem and did the following:

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

这篇关于指定自定义DrawerNavigator标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！