react-native - 一个屏幕上的多个堆栈导航器

Question

您如何使用 React Navigation 5在一个Drawer.Screen上显示多个Stack.Navigators 。

假设我有两种类型的产品：我的 Dashboard Drawer.Screen上的手机和平板电脑。手机和平板电脑代表一个单独的Stack.Navigators，我如何在同一个屏幕上显示它们？

标签： react-nativereact-reduxreact-navigationreact-navigation-stackreact-navigation-v5

Answer 1

你可以这样做：

export const DrawerNavigator = props => {
  return (
    <Drawer.Navigator
      drawerContent={props => <DrawerScreen {...props} />}
      initialRouteName={'HomeScreen'}
      drawerPosition={'right'}
      drawerStyle={{width: '100%', backgroundColor: 'transparent'}}
      screenOption={{backBehavior: 'order'}}>
      <Drawer.Screen
        name="App"
        component={isMobile ? MobileStackNavigator :     tabletStackNavigator}
        options={{gestureEnabled: false}}
      />
    </Drawer.Navigator>
  );
};