导入/导出错误？找不到“组件”、“getComponent”或“儿童”道具

Question

我需要一点帮助，重新审视我的代码。我犯了一个错误，但找不到确切的位置。 我有错误：

错误：找不到“组件”、“getComponent”或“儿童”道具 对于屏幕“Les commands”。如果您通过了，可能会发生这种情况 '不明确的'。您可能忘记从文件中导出组件 它是在定义或混合默认导入和命名导入时 正在导入。

如果我正确理解了其他提到这个问题的帖子，一般来说这是一个语法或导入/导出错误，这里我一定是被我的代码浸透了，我看不到它。你能再读一遍并帮我一把吗？ 非常感谢。

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';
const AuthenticationStack = createStackNavigator();
import Splash from './src/components/Splash';
import BottomTabNavigator from './Navigation/TabNavigator';

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.Navigator>
        ) : (
          <BottomTabNavigator />
        )}
      </NavigationContainer>
    </AppContext.Provider>
  );
}

底部导航器：

import React from "react";
import { Image } from 'react-native';
import Orders from '../Screens/Orders';
import Tools from '../Screens/Tools';
import Dashboard from '../Screens/Dashboard';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import { MainStackNavigator, SettingsStackNavigator } from "./StackNavigator";
import styles from '../assets/styles';
import i18n from '../src/i18n';

const Tab = createBottomTabNavigator();

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 BottomTabNavigator;

堆栈导航器：

import React from 'react';
import { createStackNavigator} from "@react-navigation/stack";
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 Details from '../Screens/Orders/Details';
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 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 = 'Details' component = {Details} options={{ title: i18n.t("details.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 SettingsStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}


export default { MainStackNavigator, SettingsStackNavigator };

订单：

import * as React from 'react';
import { Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import Current from './Current'
import Completed from './Completed';
import styles from '../../assets/styles';
import i18n from '../../src/i18n';

const FirstRoute = () => (
  <Current style={styles.scene} />
);

const SecondRoute = () => (
  <Completed style={styles.scene} />
);

const initialLayout = { width: Dimensions.get('window').width };

export default function Orders() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: i18n.t("current.title") },
    { key: 'second', title: i18n.t("completed.title") },
  ]);

  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}

按照评论中的建议，我做到了：

console.log({ 订单、身份验证、活动、联系人、登录、 注册、工具、扫描、当前、已完成、详细信息、产品、条款、 About、Tickets、Dashboard、Settings、Welcome });

它给出了这个：

Object {
  "About": [Function About],
  "Activities": [Function Activities],
  "Authentication": [Function Authentication],
  "Completed": [Function Completed],
  "Contact": [Function Contact],
  "Current": [Function Current],
  "Dashboard": [Function Dashboard],
  "Details": [Function Details],
  "Login": [Function Login],
  "Orders": [Function Orders],
  "Products": [Function Products],
  "Register": [Function Register],
  "Scan": [Function Scan],
  "Settings": [Function Settings],
  "Terms": [Function Terms],
  "Tickets": [Function Tickets],
  "Tools": [Function Tools],
  "Welcome": [Function App],
}

Answer 1

问题来自于此：如果我删除 MainStackNavigator 并将其替换为 Orders 它可以工作，但应用程序中的其余导航不再工作......我不知道该怎么做

<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}
                  />
                );
              }
          }}
        />