BottomTabNavigation：元素类型无效：应为字符串或 class/function 但得到：对象

Question

我正在尝试测试我的应用程序，但无法使导航正常工作。当我测试导航以转到 bottomtabnavigator 时出现错误：

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

仅仅是语法错误吗？感谢您的帮助。

App.js

import React, { useState, useEffect } from 'react';
import AppContext from './AppContext';
import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Authentication from './Screens/Authentication';
import Login from './Screens/Login';
import Register from './Screens/Register';
const AuthenticationStack = createStackNavigator();
import Splash from './src/components/Splash';
import BottomTabNavigator from './Navigation/StackNavigator';

export default function App() {

  const [user, setUser] = useState({ loggedIn: false });
  const state = { user, setUser };
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, []);

  if (loading) {
    return <Splash />;
  }

  return (
    <AppContext.Provider value={state}>
      <NavigationContainer>
        {user.loggedIn ? (
          <AuthenticationStack.Navigator>
            <AuthenticationStack.Screen name="Authentication" component={Authentication} />
            <AuthenticationStack.Screen name="Login" component={Login} />
            <AuthenticationStack.Screen name="Register" component={Register} />
          </AuthenticationStack.Navigator>
        ) : (
          <BottomTabNavigator />
        )}
      </NavigationContainer>
    </AppContext.Provider>
  );
}

堆栈导航器：

import React from 'react';
import { createStackNavigator} from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import Authentication from '../Screens/Authentication';
import Activities from '../Screens/Activities';
import Login from '../Screens/Login';
import Register from '../Screens/Register';
import Tools from '../Screens/Tools';
import Dashboard from '../Screens/Dashboard';
import Orders from '../Screens/Orders';
import About from '../Screens/About';
import Terms from '../Screens/Terms';
import Completed from '../Screens/Orders/Completed';
import Current from '../Screens/Orders/Current';
import Settings from '../Screens/Settings';
import Contact from '../Screens/Contact';
import Scan from '../Screens/Tools/Scan';
import Products from '../Screens/Tools/Products';
import Tickets from '../Screens/Tools/Tickets';
import Welcome from '../Screens/Welcome';
import i18n from '../src/i18n';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();


const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#F78400",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
  backgroundColor:'#f7f6f6'
};


const MainStackNavigator = () => {
  return (
   <Stack.Navigator screenOptions={screenOptionStyle}>       
      <Stack.Screen name = 'Orders' component = {Orders} options={{ title: i18n.t("orders.title") }}/> 
      <Stack.Screen name = 'Authentication' component = {Authentication} options={{ title: i18n.t("authentication.title") }}/> 
      <Stack.Screen name = 'Activities' component = {Activities} options={{ title: i18n.t("activities.title") }}/> 
      <Stack.Screen name = 'Contact' component = {Contact} options={{ title: i18n.t("contact.title") }}/> 
      <Stack.Screen name = 'Login' component = {Login} options={{ title: i18n.t("login.title") }}/>
      <Stack.Screen name = 'Register' component = {Register} options={{ title: i18n.t("register.title") }}/>
      <Stack.Screen name = 'Tools' component = {Tools} options={{ title: i18n.t("tools.title") }}/>
      <Stack.Screen name = 'Scan' component = {Scan} options={{ title: i18n.t("scan.title") }}/>      
      <Stack.Screen name = 'Current' component = {Current} options={{ title: i18n.t("current.title") }}/>
      <Stack.Screen name = 'Completed' component = {Completed} options={{ title: i18n.t("completed.title") }}/>
      <Stack.Screen name = 'Products' component = {Products} options={{ title: i18n.t("products.title") }}/>
      <Stack.Screen name = 'Terms' component = {Terms} options={{ title: i18n.t("terms.title") }}/> 
      <Stack.Screen name = 'About' component = {About} options={{ title: i18n.t("about.title") }}/>      
      <Stack.Screen name = 'Tickets' component = {Tickets} options={{ title: i18n.t("tickets.title") }}/>
      <Stack.Screen name = 'Dashboard' component = {Dashboard} options={{ title: i18n.t("dashboard.title") }}/>
      <Stack.Screen name = 'Settings' component = {Settings} options={{ title: i18n.t("settings.title") }}/>
      <Stack.Screen name = 'Welcome' component = {Welcome} options={{ title: i18n.t("welcome.title") }}/>
    </Stack.Navigator>
  );
}

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator tabBarOptions={{activeTintColor: 'black',
                   labelStyle: {fontSize: 12, color: 'white'}, 
                   style: {backgroundColor: '#F78400'},
                     }}>      
      <Tab.Screen
          name={i18n.t("orders.title")}
          component={MainStackNavigator}
          options={{
              tabBarIcon: ({ focused, horizontal, tintColor }) => {
                return (
                  <Image
                    source={require("../assets/images/orders.png")}
                    style={styles.icon}
                  />
                );
              }
          }}
        />
        <Tab.Screen
          name={i18n.t("dashboard.title")}
          component={Dashboard}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/dashboard.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("tools.title")}
          component={Tools}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/tools.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("settings.title")}
          component={SettingsStackNavigator}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/settings.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
    </Tab.Navigator>
  );
};


export default { MainStackNavigator, BottomTabNavigator };

Answer 1

您正在导出单个对象，您可以像 beloe 那样做

export const BottomTabNavigator = () => {

至

import {BottomTabNavigator} from './Navigation/StackNavigator';

同样的方法导出MainStackNavigator

Answer 2

出现这个错误是因为我使用了不同版本的@react-navigation/native和@react-navigation/bottom-tabs

Answer 3

如果您运行

以 Raghuvansh 的回答为基础

npm list

您应该会看到本地项目的所有当前 npm 包。

就我而言，我的 @react-navigation/native 软件包是 5.8.10 版本，我的 @react-navigation/bottom-tabs 软件包是 6.0.5。

我可以通过运行ning npm update 轻松解决这个问题，将它们放在同一个包版本中。

BottomTabNavigation：元素类型无效：应为字符串或 class/function 但得到：对象

BottomTabNavigation: Element type is invalid: expected a string or a class/function but got: object

react-native

react-navigation-bottom-tab