React Native Navigation Sidebar和TabBar切换的导航

问题描述

我想在侧边栏和标签导航之间切换。我拥有它，以便它当前可以根据屏幕大小在选项卡和侧栏之间切换，但是由于它们是单独的导航器，因此它会重置导航堆栈。更改导航器时，有什么方法可以保留导航堆栈？

如果有一种方法可以使Drawer和TabBar导航器同时具有相同的屏幕，那也可以解决我的问题。

  <Stack.Navigator
      screenoptions={{ headerShown: false }}
      mode="modal"
      initialRouteName="WalkthroughScreen"
    >
      {deviceSize(layout.width) > 0 ||
      (layout.width < 50 && Platform.OS === 'web') ? (
        <Stack.Screen name="Root" component={DrawerNavigator} />
      ) : (
        <Stack.Screen name="Root" component={BottomTabNavigator} />
      )}

解决方法

我最终做的只是为移动应用程序使用底部导航，为网络和移动网络使用抽屉导航。所以我的代码看起来像这样：

      {Platform.OS === 'web' ? (
        <Stack.Screen name="Root" component={DrawerNavigator} />
      ) : (
        <Stack.Screen name="Root" component={BottomTabNavigator} />
      )}

这样做的原因而不是其他方式是因为它只是使用平台，所以导航器永远没有理由切换中间过程。因此，我决定放弃标签页，并在移动网络上使用带有侧抽屉的汉堡菜单，并在大屏幕上使用永久性侧抽屉。

所以在我的抽屉导航器 <DrawerNavigation.Navigator> 中我这样设置 drawerType

      drawerType={deviceSize(layout.screenWidth) === 0 ? 'front' : 'permanent'}