React Native：如何在 React Native v5（而非 v4）中将多个 stackNavigator 包含到一个 drawerNavigator 中

Question

我是 React Native 的新手，我试图在 React Native v5 中将两个 stackNavigator 包含到一个 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>
    );
}

React Native：如何在 React Native v5（而非 v4）中将多个 stackNavigator 包含到一个 drawerNavigator 中

React Native: How to include multiple stackNavigators into a drawerNavigator in react native v5 (not v4)

react-native

react-native-navigation

stack-navigator

react-navigation-drawer