嵌套导航器在React导航中的高效处理

Question

我有如下所示的嵌套导航器。我可以实现所需的输出，但是问题是，对于每个屏幕，我都必须添加一个堆栈导航器，这似乎效率很低。 如何在React Navigation中有效地处理它。

<DrawerNav>
  <BottomTabNav>
    <StackNav>
      <Screen1></Screen1>  //Navigation b/w these screens should have a back button
      <Screen2></Screen2>
    </StackNav>
    <StackNav></StackNav>
    <StackNav></StackNav>
    <StackNav></StackNav>
  </BottomTabNav>
  <StackNav></StackNav>  
  <StackNav></StackNav>
  <StackNav></StackNav>
</DrawerNav>

Answer 1

您可以在不使用stackNavigator的情况下在DrawerNav或BottomTabNav内部创建N个屏幕

<NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>

https://reactnavigation.org/docs/drawer-based-navigation