React Native：如何在 react native v5（不是 v4）中将多个 stackNavigator 包含到一个 DrawerNavigator 中

Question

我是 react native 的新手，并试图在 react native v5 中将两个 stackNavigators 包含到一个 DrawerNavigator 中。我的导航器代码也在下面给出。

当我将两个stackNavigator添加到drawerNavigator中时，它显示错误：

在 v4 教程视频中有将 stackNavigator 添加到 DrawerNavigator 的示例，但找不到 v5 的任何帮助。对 v5 有帮助吗？

ShopNavigator.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import Colors from '../constants/Color/Colors';

import ProductOverviewScreen from '../screens/shop/ProductOverviewScreen';
import ProductDetailsScreen from '../screens/shop/ProductDetailsScreen';
import CartScreen from '../screens/shop/CartScreen';
import OrdersScreen from '../screens/shop/OrdersScreen';

import CustomHeaderButton from '../components/UI/CustomHeaderButton';

const ProductsNavigator = createStackNavigator();
const OrdersNavigator = createStackNavigator();
const ShopDrawerNavigator = createDrawerNavigator();

function MyProductStack() {
    return (
        <ProductsNavigator.Navigator screenOptions={{
            headerStyle: {
                backgroundColor: Colors.Primary,
            },
            headerTitleStyle: {
                fontFamily: 'OpenSans-Bold',
            },
            headerBackTitleStyle: {
                fontFamily: 'OpenSans-Regular',
            },
            headerTintColor: 'white',
        }}>
            <ProductsNavigator.Screen
                name="ProductOverview"
                component={ProductOverviewScreen}
                options={({ navigation }) => ({
                    title: 'Product Overview',
                    headerRight: () => {
                        return (
                            < CustomHeaderButton
                                name='shopping-cart'
                                type='font-awesome'
                                onPress={() => navigation.navigate('Cart',)}
                            />
                        );
                    },
                })}
            />
            <ProductsNavigator.Screen
                name="ProductDetails"
                component={ProductDetailsScreen}
                options={({ navigation, route }) => ({
                    title: route.params.productTitle,
                    headerRight: () => {
                        return (
                            < CustomHeaderButton
                                name='shopping-cart'
                                type='font-awesome'
                                onPress={() => navigation.navigate('Cart',)}
                            />
                        );
                    },
                })}
            />
            <ProductsNavigator.Screen
                name="Cart"
                component={CartScreen}
                options={{ title: 'Cart' }}
            />
        </ProductsNavigator.Navigator >
    );
}

function MyOrdersStack() {
    return (
        <OrdersNavigator.Navigator screenOptions={{
            headerStyle: {
                backgroundColor: Colors.Primary,
            },
            headerTitleStyle: {
                fontFamily: 'OpenSans-Bold',
            },
            headerBackTitleStyle: {
                fontFamily: 'OpenSans-Regular',
            },
            headerTintColor: 'white',
        }}>
            <OrdersNavigator.Screen
                name="Orders"
                component={OrdersScreen}
                options={({ navigation }) => ({
                    title: 'Your Orders',
                    headerRight: () => {
                        return (
                            < CustomHeaderButton
                                name='shopping-cart'
                                type='font-awesome'
                                onPress={() => navigation.navigate('Cart',)}
                            />
                        );
                    },
                })}
            />
        </OrdersNavigator.Navigator>
    );
}

function ShopDrawer(){
    return (
        <ShopDrawerNavigator.Navigator>
            <ShopDrawerNavigator.Screen 
                name="Products"
                component={tried with both "MyProductStack"/"ProductsNavigator"}
            />
            <ShopDrawerNavigator
                name="Orders"
                component={tried with both "MyOrdersStack"/"OrdersNavigator"}
            />
        </ShopDrawerNavigator.Navigator>
    );
}

export default () => {
    return (
        <NavigationContainer>
            <ShopDrawer />
        </NavigationContainer>
    );
};

Answer 1

这里的问题是您将导航器对象作为组件传递，而不是作为堆栈的实际组件。您必须使用堆栈作为组件，如下所示

function ShopDrawer(){
    return (
        <ShopDrawerNavigator.Navigator>
            <ShopDrawerNavigator.Screen 
                name="Products"
                component={MyProductStack}
            />
            <ShopDrawerNavigator.Screen
                name="Orders"
                component={MyOrdersStack}
            />
        </ShopDrawerNavigator.Navigator>
    );
}