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

Posted 2023-02-16

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

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

答案

您可以这样操作：

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>
  );
;

以上是关于一个屏幕上的多个堆栈导航器的主要内容，如果未能解决你的问题，请参考以下文章

使用导航和堆栈将多个页面实现为单个页面

如何在我的 Xcode Swift 项目的不同导航堆栈中从一个视图控制器屏幕切换到另一个？

如何隐藏特定屏幕上的顶部标签栏？

反应本机导航：无法导航到堆栈中的顶部屏幕

从嵌套屏幕导航到不同选项卡堆栈中的另一个嵌套屏幕（反应导航）

MvvMCross 导航回多个视图模型/截断导航堆栈