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

Question

我有一个应用场景，其中我有一个底部选项卡导航器作为我的基本导航器选项卡，主页、产品...作为我的选项卡：

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

让我们考虑一下底部选项卡中的前 2 个屏幕。第一个是家。它包含前 5 名热门产品的列表和一个 "view all" link 导航到第二个选项卡产品。

每个单独列出的产品都应该导航到产品详细信息 page.Since，底部选项卡导航器中未定义 productDetail 导航，我试图通过 homeStack 在主页中创建一个新的 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，有助于导航到其各种 link。它是：

<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 也会导致底部选项卡消失。

我在这里处理情况完全错误吗？有没有更简单的方法来做到这一点，我还没有想到？

Answer 1

所以这取决于您想留在哪个选项卡上，如果您想留在主页选项卡上，您可以将其留在主页堆栈中。如果您想转到产品选项卡 -> 产品详细信息页面，那么当它们进入 back/dismiss 时，它将返回到产品选项卡的根屏幕，那么您可以执行类似这样的操作来导航到嵌套屏幕：

navigation.navigate('Product', { screen: 'ProductDetail' });

Answer 2

我认为您应该将 ProductDetail 和 CartStack 以及 BottomTabContainer 放在 Stack.Navigator 中，然后您可以轻松导航到 ProductDetail 或 CartStack 来自 BottomTabNavigator

中的任何位置

像这样：

<Stack.Navigator
  screenOptions={{
    headerShown: false,
  }}>
  <Stack.Screen name="TabNavigator" component={YourTabComponent} />
  <Stack.Screen name="CartStack" component={CartStack} />
  <Stack.Screen name="ProductDetail" component={ProductDetail} />
</Stack.Navigator>

然后您可以从 HomeStack 和 ProductStack 中删除您的 CartStack 和 ProductDetail。

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

What is the proper way of dealing with navigation to screens located in separate navigators directly in react navigator 5?

react-native

react-navigation

react-navigation-v5

react-navigation-bottom-tab