在 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 名热门产品的列表和一个"查看全部"链接，该链接将其导航到第二个选项卡产品。

每个单独的发布产品都应该导航到产品详细信息页面。由于产品详细信息导航未在底部选项卡导航器中定义，因此我试图通过 homeStack 在主页中创建一个新的堆栈导航器来解决此问题，如下所示：

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

现在我们在处理程序中有了产品详细信息导航器，我能够导航到产品详细信息。 同样，产品底部选项卡在顶部具有另一个堆栈导航器，作为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作为导航器的元素，我有一种感觉，我做得不对。

导航器的这种多级堆叠是否会导致性能问题？

此外，从主屏幕直接导航到产品详细信息时我访问的购物车堆栈导致底部选项卡消失。

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

Answer 1

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

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

Answer 2

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

像这样：

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

然后，您可以将CartStack和ProductDetail从HomeStack中删除并ProductStack。