REACT-NATIVE：n6 元素类型无效：需要一个字符串（对于内置组件）或一个 class/function（对于复合组件）但得到：对象

Question

将我的导航更新为导航 6 后出现此错误它告诉我“检查 ProductsNavigator”的渲染方法

我什至没有导出 ProductsNavigator，而是将它放在抽屉中，而是导出抽屉！你们能告诉我这里的问题在哪里吗？

App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet } from "react-native";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import AppLoading from "expo-app-loading";
import * as Font from "expo-font";
import productsReducer from "./store/reducers/products";
import { composeWithDevTools } from "redux-devtools-extension";
import cartReducer from "./store/reducers/cart";
import { useState } from "react";
import ordersReducer from "./store/reducers/orders";
import AuthReducer from "./store/reducers/Auth";
import ReduxThunk from "redux-thunk";
import AppNavigator from "./navigation/NavigationContainer";

const rootReducer = combineReducers({
  products: productsReducer,
  cart: cartReducer,
  orders: ordersReducer,
  auth: AuthReducer,
});

const store = createStore(
  rootReducer,
  applyMiddleware(ReduxThunk),
  composeWithDevTools()
);

const fetchFonts = () => {
  return Font.loadAsync({
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
  });
};

export default function App() {
  const [fontLoaded, setfontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setfontLoaded(true)}
        onError={console.warn}
      />
    );
  }
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

导航容器

import React from "react";
import { useSelector } from "react-redux";
import { NavigationContainer } from "@react-navigation/native";

import { ShopNavigator, AuthNavigator } from "./ShopNavigation";
import StartUpScreen from "../screens/StartUpScreen";

const AppNavigator = (props) => {
  const isAuth = useSelector((state) => !!state.auth.token);
  const didTryAutoLogin = useSelector((state) => state.auth.didTryAutoLogin);

  return (
    <NavigationContainer>
      {isAuth && <ShopNavigator />}
      {!isAuth && didTryAutoLogin && <AuthNavigator />}
      {!isAuth && !didTryAutoLogin && <StartUpScreen />}
    </NavigationContainer>
  );
};

export default AppNavigator;

App 导航器

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { useDispatch } from "react-redux";
import ProductsOverviewScreen, {
 screenOptions as productsOverviewScreenOptions,
} from "../screens/shop/ProductsOverviewScreen";
import ProductDetails, {
 screenOptions as productDetailScreenOptions,
} from "../screens/shop/ProductDetailScreen";

import CartScreen, {
 screenOptions as cartScreenOptions,
} from "../screens/shop/CartScreen";
import OrdersScreen, {
 screenOptions as ordersScreenOptions,
} from "../screens/shop/OrdersScreen";
import {
 createDrawerNavigator,
 DrawerContentScrollView,
 DrawerItemList,
} from "@react-navigation/drawer";

import userProducts, {
 screenOptions as userProductsScreenOptions,
} from "../screens/user/UserProductsScreen";
import EditingProductScreen, {
 screenOptions as editProductScreenOptions,
} from "../screens/user/EditProductScreen";
import AddingProductScreen, {
 screenOptions as AddingProductScreenOptions,
} from "../screens/user/AddingProductScreen";
import { Button, Platform } from "react-native";
import Login from "../screens/Auth/login";
import * as authActions from "../store/actions/Auth";
import { Ionicons } from "@expo/vector-icons";

const ProductsStackNavigator = createStackNavigator();
const defaultNavOptions = {
 headerStyle: {
   backgroundColor: Platform.OS === "android" ? "aqua" : "",
 },
 headerTitleStyle: {
   fontFamily: "open-sans-bold",
 },
 headerBackTitleStyle: {
   fontFamily: "open-sans",
 },
 headerTintColor: Platform.OS === "android" ? "white" : "aqua",
};

const ProductsNavigator = () => {
 return (
   <ProductsStackNavigator screenOptions={defaultNavOptions}>
     <ProductsStackNavigator.Screen
       name="ProductsOverview"
       component={ProductsOverviewScreen}
       options={productsOverviewScreenOptions}
     />
     <ProductsStackNavigator.Screen
       name="ProductsDetail"
       component={ProductDetails}
       options={productDetailScreenOptions}
     />
     <ProductsStackNavigator.Screen
       name="CartScreen"
       component={CartScreen}
       options={cartScreenOptions}
     />
   </ProductsStackNavigator>
 );
};

const OrdersStackNavigator = createStackNavigator();

export const OrdersNavigator = () => (
 <OrdersStackNavigator.Navigator screenOptions={defaultNavOptions}>
   <OrdersStackNavigator.Screen name="OrdersScreen" component={OrdersScreen} />
 </OrdersStackNavigator.Navigator>
);

const AdminStackNavigator = createStackNavigator();

export const AdminNavigator = () => (
 <AdminStackNavigator.Navigator screenOptions={defaultNavOptions}>
   <AdminStackNavigator.Screen
     name="User Products"
     component={userProducts}
     options={userProductsScreenOptions}
   />
   <AdminStackNavigator.Screen
     name="EditingProductScreen"
     component={EditingProductScreen}
     options={editProductScreenOptions}
   />
   <AdminStackNavigator.Screen
     name="AddingProductScreen"
     component={AddingProductScreen}
     options={AddingProductScreenOptions}
   />
 </AdminStackNavigator.Navigator>
);

function CustomDrawerContent(props) {
 const dispatch = useDispatch();
 return (
   <DrawerContentScrollView {...props}>
     <DrawerItemList {...props} />
     <Button
       title="LOGOUT"
       onPress={() => {
         dispatch(authActions.logout());
       }}
     />
   </DrawerContentScrollView>
 );
}

const ShopDrawerNavigator = createDrawerNavigator();

export const ShopNavigator = () => {
 return (
   <ShopDrawerNavigator.Navigator
     drawerContentOptions={{
       activeTintColor: "aqua",
     }}
     drawerContent={(props) => <CustomDrawerContent {...props} />}
   >
     <ShopDrawerNavigator.Screen
       name="Products"
       component={ProductsNavigator}
       options={{
         drawerIcon: (props) => (
           <Ionicons
             name={Platform.OS === "android" ? "md-cart" : "ios-cart"}
             size={23}
             color="aqua"
           />
         ),
       }}
     />
     <ShopDrawerNavigator.Screen
       name="Orders"
       component={OrdersNavigator}
       options={{
         drawerIcon: (props) => (
           <Ionicons
             name={Platform.OS === "android" ? "md-list" : "ios-list"}
             size={23}
             color="aqua"
           />
         ),
       }}
     />
     <ShopDrawerNavigator.Screen
       name="Admin"
       component={AdminNavigator}
       options={{
         drawerIcon: (props) => (
           <Ionicons
             name={Platform.OS === "android" ? "md-create" : "ios-create"}
             size={23}
             color="aqua"
           />
         ),
       }}
     />
   </ShopDrawerNavigator.Navigator>
 );
};

const AuthStackNavigator = createStackNavigator();

export const AuthNavigator = () => (
 <AuthStackNavigator.Navigator
   screenOptions={({}) => ({ headerShown: false })}
 >
   <AuthStackNavigator.Screen name="Login" component={Login} />
 </AuthStackNavigator.Navigator>
);

Answer 1

I believe you are missing to add .Navigator to your ProductsNavigator component

const ProductsNavigator = () => {
 return (
   <ProductsStackNavigator.Navigator screenOptions={defaultNavOptions}>
     <ProductsStackNavigator.Screen
       name="ProductsOverview"
       component={ProductsOverviewScreen}
       options={productsOverviewScreenOptions}
     />
     <ProductsStackNavigator.Screen
       name="ProductsDetail"
       component={ProductDetails}
       options={productDetailScreenOptions}
     />
     <ProductsStackNavigator.Screen
       name="CartScreen"
       component={CartScreen}
       options={cartScreenOptions}
     />
   </ProductsStackNavigator.Navigator>
 );
};

REACT-NATIVE：n6 元素类型无效：需要一个字符串（对于内置组件）或一个 class/function（对于复合组件）但得到：对象

REACT-NATIVE: n6 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

react-native

react-navigation