在 DrawerNavigator 屏幕中显示 TabBar

Question

我目前有这个结构：

const Tabs = TabNavigator({
  Home: {screen: Home},
  Store:{screen: Store}
  More: {screen: More,
    navigationOptions: {
      tabBarLabel: 'More',
      tabBarIcon: <Entypo name='dots-three-horizontal' size={25}/>,
      header: null
      },
    }
  },
  {
  initialRouteName: 'Home',
  tabBarPosition: 'bottom',
  navigationOptions: ({ navigation }) => ({
            tabBarOnPress: (scene, jumpToIndex) => {
                if (scene.route.routeName === "More") {
                  navigation.navigate('DrawerToggle')
                }
                else{
                  jumpToIndex(scene.index);
                }
            },
        }),
      },
    )


const Drawer = DrawerNavigator(
  {
   Tabs: {screen: Tabs,
     navigationOptions: {
           drawerLabel: () => null
      }
   },
   Profile: {screen: Profile},
   Search: {screen: Search}
  },
  {
   initialRouteName: 'Tabs',
   headerMode: 'none',
   drawerPosition: 'right'
  }
)


export const Root = StackNavigator(
  {
  LoginScreen: {screen: Login},
  Drawer: {screen: Drawer},
 },
  {
   initialRouteName: 'LoginScreen'
  }
)

一切都很好。当我点击（例如）“个人资料”时，页面正常加载，点击“更多”时，抽屉菜单打开。

我想实现的功能是我想在“个人资料”页面（DrawerNavigator 屏幕）内显示 TabBar。这怎么可能？

Answer 1

const Drawer = DrawerNavigator(
  {
   Profile: {screen: Tabs},
   Search: {screen: Search}
  }

您可以将导航器嵌套在另一个导航器中。选项卡导航器是一个组件，您可以将该组件用作不同导航器的“屏幕”。

导航器是一个组件。屏幕必须是一个组件。