如何解决如何在 react native/expo 中导航两个不同堆栈的屏幕
创建具有两个屏幕产品的产品堆栈导航并结帐
const ProductStack = createStackNavigator();
function ProductStackNavigation() {
return (
<ProductStack.Navigator initialRouteName="Product">
<ProductStack.Screen
name="Product"
options={{
headerTitle: "Product",headerShown: true,}}
component={Product} />
<ProductStack.Screen
name="CheckOut"
options={{
headerTitle: "CheckOut",}}
component={CheckOut} />
</ProductStack.Navigator>
)
}
---
**create other favourite stack navigation having one screen favourite**
const FavouriteStack = createStackNavigator();
function FavouriteStackNavigation() {
return (
<FavouriteStack.Navigator initialRouteName="Favourite">
<FavouriteStack.Screen
name="Favourite"
options={{
headerTitle: "Favourite",}}
component={Favourite} />
</FavouriteStack.Navigator>
)
}
创建标签导航包含两个堆栈,第一个包含产品堆栈,第二个包含最喜欢的堆栈,从最喜欢的屏幕导航到产品屏幕
const BottomTab = createBottomTabNavigator();
function TabNavigation() {
return (
<BottomTab.Navigator
tabBarOptions={{
activeTintColor: '#fafafa',labelStyle: { marginBottom: 10 }
}}
>
<BottomTab.Screen
name="product"
children={() => <ProductStackNavigation />}
options={{
tabBarLabel: 'product',}}
/>
<BottomTab.Screen
name="Favourite"
children={() => <FavouriteStackNavigation />}
options={{
tabBarLabel: 'Favourite',}}
/>
</BottomTab.Navigator>
)
}
如何将收藏夹屏幕导航到收藏夹标签内的结帐屏幕
解决方法
您实际上不需要创建“FavoriteStack”。您可以简单地将组件收藏夹放在 BottomStack.Screen 中,如下所示:
<BottomTab.Screen
name="Favourite"
component={Favourite}
options={{
tabBarLabel: 'Favourite',}}
/>
关于从“收藏夹”到“结帐”的导航,您可以使用“@react-natvigation/native”中的 useNavigation 钩子
const navigation = useNavigation();
并使用
执行导航navigation.navigate("ProductStack",{
screen:"Checkout"
})
请记住,您需要将 ProductStack 作为屏幕以及某处,以便您可以访问该堆栈。您无法从主导航容器导航到分离的堆栈。您只能使用三元运算符切换堆栈。
isFavourite ? <FavouriteNavigator /> : <Productnavigator />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。