如何在 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>
    )
}

创建标签导航包含两个堆栈，第一个包含产品堆栈，第二个包含最喜欢的堆栈从最喜欢的屏幕导航到产品屏幕

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

您实际上不需要创建“FavouriteStack”。您可以像这样简单地将组件收藏夹放在 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 />