CreateStackNavigator 中的 CreateDrawerNavigator

Question

我的问题是：我似乎无法在左侧添加 hamburguer 按钮（以切换抽屉），而且我无法根据屏幕将标题添加到抽屉（例如，在登录屏幕上显示 header 上的 'Login'）。

代码简要说明：

AppNavigation.js 处理应用程序的所有导航。包括两个抽屉（LoggedDrawer 和 UnloggedDrawer）。

它们在堆栈导航器 (RootNavigator) 中，RootNavigator 在容器 (react-navigation 3.0) 中。

这是我的代码：

AppNavigation.js

const UnloggedDrawer = createDrawerNavigator(
  {
    Home: { screen: HomeScreen },
    Login: { screen: LoginScreen },
    SignUp: { screen: SignUpScreen }
  }, { 
  drawerWidth: SCREEN_WIDTH * 0.6 
  }
)

const LoggedDrawer = createDrawerNavigator(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen }
  }, {
  contentComponent: (props) => (
    <View style={{ flex: 1 }}>
      <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
        <DrawerItems {...props} />
        <Button
          color='red'
          title='Logout'
          onPress={() => { props.screenProps.logoutCurrentUser(props) }}
        />
      </SafeAreaView>
    </View>
  ),
  drawerWidth: SCREEN_WIDTH * 0.6,
})

const RootNavigator = createStackNavigator({
  Init: {
    screen: Init,
    navigationOptions: {
      header: null,
    },
  },
  UnloggedDrawer: { screen: UnloggedDrawer },
  LoggedDrawer: { screen: LoggedDrawer }
},
{
  mode: 'modal',
  title: 'Main',
  initialRouteName: 'Init',
  transitionConfig: noTransitionConfig,
})

Init.js

componentWillReceiveProps(props) {
  const { navigation } = props;
  if (props.userReducer.isSignedUp) {
    navigation.dispatch(StackActions.reset(
      { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'LoggedDrawer' })] }
    ))
  } else {
    navigation.dispatch(StackActions.reset(
      { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'UnloggedDrawer' })] }
    ))
  }
}

在我的屏幕上，我有一个导航选项，就像这样（唯一的区别是图标），这只是代码的一部分，只是作为示例：

export default class HomeScreen extends Component {
  static navigationOptions = {
  headerTitle: 'Home',
  drawerIcon: () => (
    <SimpleIcon
      name="home"
      color="rgba(110, 120, 170, 1)"
      size={20}
    />
  )};
}

所以我想做的是：

1. 在所有屏幕的 header 添加一个汉堡包图标，用于切换抽屉

2.在中间添加标题header（也适用于所有屏幕）

我尝试过的：

我可以在互联网上找到的所有内容，但似乎没有任何效果。

此外，如果我的架构有误，请指出，如果还有不同的方法来实现我正在尝试做的事情，我们也会接受。

提前致谢。请帮忙。

Answer 1

所以，回答我自己的问题。使用react-native-elements可以轻松实现我想要的。

他们有一个名为 'Header' 的组件，您可以在每个屏幕上使用它来自定义 header。

我将它添加到 drawerNavigators 和 stackNavigator。

headerMode: 'null'

然后对于每个屏幕，我必须将 JSX 代码包装在 React.Fragment 中，所以它是这样的：

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>

留下答案以防其他人遇到同样的问题。

CreateStackNavigator 中的 CreateDrawerNavigator

CreateDrawerNavigator inside createStackNavigator

react-native

react-native-android

react-navigation

react-navigation-drawer

react-navigation-stack