直接在react导航器5中处理导航到位于单独导航器中的屏幕的正确方法是什么？

Question

我有一个应用场景，其中我有一个Bottom标签导航器作为我的基本导航器标签，其中Home，Products ...作为我的标签：

<Tab.Navigator
    screenOptions={{
      headerShown: true,
    }}
    tabBarOptions={{
      showLabel: false,
      activeTintColor: MyColors.COLOR_ACCENT,
    }}>
    <Tab.Screen
      name="Home"
      component={HomeStack}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="home" color={color} size={size} />
        ),
      }}
    />

    <Tab.Screen
      name="Product"
      component={ProductStack}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="business-center" color={color} size={size} />
        ),
      }}
    />
    <Tab.Screen
      name="Request"
      component={MedRequest}
      options={{
        color: MyColors.COLOR_PRIMARY,
        tabBarIcon: ({color, size}) => (
          <Icon
            name="near-me"
            color={color}
            size={35}
            style={{transform: [{rotateZ: '20deg'}]}}
          />
        ),
      }}
    />
    <Tab.Screen
      name="Reminder"
      component={Reminder}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="alarm" color={color} size={size} />
        ),
      }}
    />
    <Tab.Screen
      name="Location"
      component={LocationStack}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="location-on" color={color} size={size} />
        ),
      }}
    />
  </Tab.Navigator>

让我们考虑一下底部选项卡中的前两个屏幕。第一个是家。它包含最受欢迎的5种热门产品的列表，以及一个“查看全部”链接，可将其导航到第二个标签产品。

每个列出的产品都应导航到产品详细信息页面。由于在底部标签导航器中未定义productDetail导航，因此我尝试通过homeStack在home中创建一个新的Stack导航器来解决此问题，如下所示：] >

<Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Notifications" component={Notifications} />
    <Stack.Screen name="ProductDetail" component={ProductDetail} />
    <Stack.Screen name="AuthStack" component={AuthStack} />
    <Stack.Screen name="BlogStack" component={BlogStack} />
    <Stack.Screen name="BlogDetail" component={BlogDetail} />
    <Stack.Screen name="Cart" component={CartStack} />
  </Stack.Navigator>
现在我们在处理程序中有了productDetail导航器，我能够导航到产品详细信息。同样，产品底部选项卡的顶部还有另一个堆栈导航器，即ProductStack，它有助于导航到其各个链接。它是：

<Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Stack.Screen name="Product" component={Product} />
    <Stack.Screen name="CartStack" component={CartStack} />
    <Stack.Screen name="ProductDetail" component={ProductDetail} />
  </Stack.Navigator>
我主要担心的是，我已经在多个地方将ProductDetail和CartStack作为导航器的一个元素，并且我感觉我没有正确地做到这一点。

导航器的这种多层堆叠还会导致性能问题吗？

当直接从主屏幕导航到productDetail时，我访问的cartStack也会导致底部选项卡的消失。

我在这里处理情况完全错误吗？有没有更简单的方法可以解决我的想法？

我有一个应用场景，其中我有一个Bottom标签导航器作为我的基本导航器标签，其中Home，Products ...作为我的标签：

Answer 1

因此，取决于要保留在哪个选项卡上，如果要保留在主页选项卡上，可以将其保留在主页堆栈中。如果要转到产品选项卡->产品详细信息页面，以便当它们返回/关闭时将返回到产品选项卡的根屏幕，则您可以执行以下操作来导航到嵌套屏幕：

Answer 2

我认为您应该将ProductDetail和CartStack以及BottomTabContainer放在Stack.Navigator中，然后可以轻松地从ProductDetail中的任何位置导航至CartStack或BottomTabNavigator