在同一屏幕上创建两个抽屉和一个标签导航器

Question

我有一个带有两个抽屉导航的屏幕。在v1中可以处理两个抽屉，但现在不起作用了。

我也想在同一屏幕上添加一个标签导航器，但是我遇到了上面的问题。

如何使用React Navigation v2在一个屏幕中使用两个抽屉

这是我的路线配置：

export const MainStack = createStackNavigator({
    Home: {
        screen: HomeContainer,
        navigationOptions: { header: null },
    },
    NewsList: {
        screen: NewsList,
        navigationOptions: { header: null },
    },
    NewsDetail: {
        screen: NewsDetail,
        path: 'news/:itemId',
        navigationOptions: { header: null },
    },
  },
  {
    mode: 'card',
    initialRouteName: 'Home',
    drawerBackgroundColor: '#151515',
    drawerPosition: 'right',
    drawerWidth: 80,
  },
);



export const MainDrawer = createDrawerNavigator({
    MainStack,
  },

  {
    initialRouteName: 'MainStack',
    drawerBackgroundColor: '#151515',
    drawerPosition: 'left',
    drawerWidth: 80,
    contentComponent: props => <LeftMenuContainer {...props} />,
    drawerOpenRoute: 'LeftSideMenu',
    drawerCloseRoute: 'LeftSideMenuClose',
    drawerToggleRoute: 'LeftSideMenuToggle',
  },
);

export const Root = createDrawerNavigator({
    MainStack
  },
  {
    navigationOptions: {
    },
    drawerBackgroundColor: '#151515',
    drawerPosition: 'right',
    drawerWidth: 80,
    contentComponent: props => <MenuContainer {...props} />,
    drawerOpenRoute: 'RightSideMenu',
    drawerCloseRoute: 'RightSideMenuClose',
    drawerToggleRoute: 'RightSideMenuToggle',
  },
);

Answer 1

应该有一个层次结构

将MainDrawer作为屏幕传递给Root。

export const MainStack = createStackNavigator({
    Home: {
        screen: HomeContainer,
        navigationOptions: { header: null },
    },
    NewsList: {
        screen: NewsList,
        navigationOptions: { header: null },
    },
    NewsDetail: {
        screen: NewsDetail,
        path: 'news/:itemId',
        navigationOptions: { header: null },
    },
  },
  {
    mode: 'card',
    initialRouteName: 'Home',
    drawerBackgroundColor: '#151515',
    drawerPosition: 'right',
    drawerWidth: 80,
  },
);



export const MainDrawer = createDrawerNavigator({
    MainStack,
  },

  {
    initialRouteName: 'MainStack',
    drawerBackgroundColor: '#151515',
    drawerPosition: 'left',
    drawerWidth: 80,
    contentComponent: props => <LeftMenuContainer {...props} />,
    drawerOpenRoute: 'LeftSideMenu',
    drawerCloseRoute: 'LeftSideMenuClose',
    drawerToggleRoute: 'LeftSideMenuToggle',
  },
);

export const Root = createDrawerNavigator({
    MainDrawer
  },
  {
    navigationOptions: {
    },
    drawerBackgroundColor: '#151515',
    drawerPosition: 'right',
    drawerWidth: 80,
    contentComponent: props => <MenuContainer {...props} />,
    drawerOpenRoute: 'RightSideMenu',
    drawerCloseRoute: 'RightSideMenuClose',
    drawerToggleRoute: 'RightSideMenuToggle',
  },
);