如何在 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 />