CreateStackNavigator中的CreateDrawerNavigator

Question

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

代码简要说明：

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

在我的屏幕上，我有一个像这样的所有这些的navigationOptions（唯一的区别是图标），这只是代码的一部分，仅作为一个例子：

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

所以我想做的是：

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

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

我尝试过的：

• 我在互联网上找到的一切似乎都没有用。

此外，如果我的架构是错误的，请指出，如果还有一种不同的方式来实现我正在尝试做的事情也被接受。

提前致谢。请帮忙。

Answer 1

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

他们有一个名为“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>

留下答案，以防其他人有同样的问题。