Question

我正在使用DrawerNavigator和StackNavigator

#wrapper{
  width: 200px;
  height: 200px;
  Border: 1px solid black;
  margin: 0px;
  padding: 0px;
}
#text{
  background: red;
  font-size: 40px;
  line-height: 30px;
  padding: 0px;
  margin-top: 0px;
  margin-left: 0;
  display:inline-block;
}

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

在WelcomeContainer组件中实现它

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 />} /> }中指示标题，如果是，如何？

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

指定自定义DrawerNavigator标头

1 个答案: