如何在react native/expo中导航两个不同堆栈的屏幕

Question

创建具有两屏产品的产品堆栈导航并签出

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",
headerShown: true,
}}
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",
headerShown: true,
}}
component={Favourite} />          
</FavouriteStack.Navigator>
)
}

创建选项卡导航conatain两个堆栈第一个包含产品堆栈，第二个包含收藏夹堆栈从收藏夹屏幕导航到产品屏幕

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

---

如何在收藏夹选项卡内导航收藏夹屏幕至结账屏幕

Answer 1

您实际上不需要创建"FavoriteStack"；。你可以简单地将组件Favorite放在BottomStack中。屏幕如下：

<BottomTab.Screen
name="Favourite"
component={Favourite}
options={{
tabBarLabel: 'Favourite',
}}
/>         

关于从收藏夹到结账的导航，您可以使用"中的导航钩@react natvigion/nature"；

const navigation = useNavigation();

并使用进行导航

navigation.navigate("ProductStack", {
screen:"Checkout"
})

请记住，您需要在某个地方将ProductStack作为屏幕，以便访问该堆栈。您无法从主导航容器导航到分离的堆栈。只能使用三元运算符切换堆栈。

isFavourite ? <FavouriteNavigator /> : <Productnavigator />