React native 在react navigator 5中,如何正确处理对位于单独导航器中的屏幕的导航?
我有一个应用程序场景,其中我有一个底部选项卡导航器作为我的基本导航器选项卡,带有主页、产品。。。作为我的标签:React native 在react navigator 5中,如何正确处理对位于单独导航器中的屏幕的导航?,react-native,react-navigation,react-navigation-v5,react-navigation-bottom-tab,React Native,React Navigation,React Navigation V5,React Navigation Bottom Tab,我有一个应用程序场景,其中我有一个底部选项卡导航器作为我的基本导航器选项卡,带有主页、产品。。。作为我的标签: <Tab.Navigator screenOptions={{ headerShown: true, }} tabBarOptions={{ showLabel: false, activeTintColor: MyColors.COLOR_ACCENT, }}> <Tab.Screen
<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大热门产品的列表和一个“查看全部”链接,该链接将其导航到第二个标签产品
每个列出的产品都应该导航到产品详细信息页面。由于底部选项卡导航器中未定义productDetail导航,因此我尝试通过homeStack在home中创建一个新的堆栈导航器来解决此问题,如下所示:<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 navigator,我就可以导航到product detail了。
类似地,“产品底部”选项卡还有另一个堆栈导航器作为“顶部产品堆栈”,这有助于导航到其各个链接。具体如下:
<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 I access会导致底部选项卡消失
我在这里处理的情况完全错了吗??有没有一种更简单的方法,我没有想到 因此,这取决于要保留在哪个选项卡上,如果要保留在“主”选项卡上,可以将其保留在主堆栈中。如果您想转到“产品”选项卡->产品详细信息页面,这样当他们返回/退出时,它将返回到“产品”选项卡的根屏幕,您可以执行以下操作以导航到嵌套屏幕:
navigation.navigate('Product', { screen: 'ProductDetail' });
因此,这取决于您想保留在哪个选项卡上,如果您想保留在主选项卡上,可以将其保留在主堆栈中。如果您想转到“产品”选项卡->产品详细信息页面,这样当他们返回/退出时,它将返回到“产品”选项卡的根屏幕,您可以执行以下操作以导航到嵌套屏幕:
navigation.navigate('Product', { screen: 'ProductDetail' });
我认为您应该将
ProductDetail
和CartStack
以及BottomTabContainer
放在Stack.Navigator
中,然后您可以从BottomTabNavigator
中的任何位置轻松导航到ProductDetail
或CartStack
大概是这样的:
我认为你应该把你的
ProductDetail
和CartStack
以及你的BottomTabContainer
放在Stack.Navigator
中,然后你可以从BottomTabNavigator
中的任何地方轻松导航到ProductDetail
或CartStack
大概是这样的:
这将非常好,但它使productDetail表现为BottomTabContainer的同级,因此在那里导航时底部选项卡是不可见的。哦。。在这种情况下,我认为您的实现是正确的。这将非常好,但它使productDetail成为BottomTabContainer的同级,因此在那里导航时底部选项卡是不可见的。哦。。在这种情况下,我认为您的实现是正确的。这种方法解决了直接从主页通过产品详细信息导航到购物车堆栈时底部选项卡消失的问题。谢谢。我只是在等着自己在所有相关问题上落实你的答案。:)再次感谢。这种方法解决了直接从主页通过产品详细信息导航到购物车堆栈时底部选项卡消失的问题。谢谢。我只是在等着自己在所有相关问题上落实你的答案。:)再次感谢。