Javascript npm，错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义

React native、npm、expo。 IOS模拟机

我得到这个错误，我不知道为什么

警告：React.createElement:类型无效--应为字符串（对于内置组件）或类/函数（对于复合组件），但Get:未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

请在App.js:23查看您的代码

in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in DevAppContainer (at AppContainer.js:121)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)

在captureConsoleStackTrace中的节点_modules/expo/build/logs/LogSerialization.js:155:14处 在serializeLogDataAsync中的节点_modules/expo/build/logs/LogSerialization.js:41:26处

• 。。。9个来自框架内部的堆栈框架

App.js：

import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import { enableScreens } from 'react-native-screens';

import MealsNavigator from './navigation/MealsNavigator';

enableScreens();

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

function App() {
  const [fontLoaded, setFontLoaded] = useState(false);

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

  return <MealsNavigator />;
}
export default App;

import*作为“expo字体”中的字体；
从“expo”导入{AppLoading}；
从“react native screens”导入{enableScreens}；
从“./navigation/MealsNavigator”导入MealsNavigator；
启用屏幕（）；
常量fetchFonts=（）=>{
返回Font.loadAsync({
“开放SAN”：需要（“./assets/font/OpenSans Regular.ttf”），
“open sans bold”：需要（“./assets/font/OpenSans bold.ttf”）
});
};
函数App（）{
常量[fontLoaded，setFontLoaded]=useState（false）；
如果（！fontLoaded）{
返回(
setFontLoaded（真）}
onError={console.warn}
/>
);
}
返回；
}
导出默认应用程序；

MealsNavigator：

import React from 'react';
import { Platform, Text } from 'react-native';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createAppContainer,
  createDrawerNavigator
} from 'react-navigation';
import { Ionicons } from '@expo/vector-icons';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';

import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';
import FavoritesScreen from '../screens/FavoritesScreen';
import FiltersScreen from '../screens/FiltersScreen';
import Colors from '../constants/Colors';

const defaultStackNavOptions = {
  headerStyle: {
    backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
  },
  headerTitleStyle: {
    fontFamily: 'open-sans-bold'
  },
  headerBackTitleStyle: {
    fontFamily: 'open-sans'
  },
  headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primaryColor,
  headerTitle: 'A Screen'
};

const MealsNavigator = createStackNavigator(
  {
    Categories: {
      screen: CategoriesScreen
    },
    CategoryMeals: {
      screen: CategoryMealsScreen
    },
    MealDetail: MealDetailScreen
  },
  {
    // initialRouteName: 'Categories',
    defaultNavigationOptions: defaultStackNavOptions
  }
);

const FavNavigator = createStackNavigator(
  {
    Favorites: FavoritesScreen,
    MealDetail: MealDetailScreen
  },
  {
    // initialRouteName: 'Categories',
    defaultNavigationOptions: defaultStackNavOptions
  }
);

const tabScreenConfig = {
  Meals: {
    screen: MealsNavigator,
    navigationOptions: {
      tabBarIcon: tabInfo => {
        return (
          <Ionicons name="ios-restaurant" size={25} color={tabInfo.tintColor} />
        );
      },
      tabBarColor: Colors.primaryColor,
      tabBarLabel:
        Platform.OS === 'android' ? (
          <Text style={{ fontFamily: 'open-sans-bold' }}>Meals</Text>
        ) : (
          'Meals'
        )
    }
  },
  Favorites: {
    screen: FavNavigator,
    navigationOptions: {
      tabBarIcon: tabInfo => {
        return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />;
      },
      tabBarColor: Colors.accentColor,
      tabBarLabel:
        Platform.OS === 'android' ? (
          <Text style={{ fontFamily: 'open-sans-bold' }}>Favorites</Text>
        ) : (
          'Favorites'
        )
    }
  }
};

const MealsFavTabNavigator =
  Platform.OS === 'android'
    ? createMaterialBottomTabNavigator(tabScreenConfig, {
        activeTintColor: 'white',
        shifting: true,
        barStyle: {
          backgroundColor: Colors.primaryColor
        }
      })
    : createBottomTabNavigator(tabScreenConfig, {
        tabBarOptions: {
          labelStyle: {
            fontFamily: 'open-sans'
          },
          activeTintColor: Colors.accentColor
        }
      });

const FiltersNavigator = createStackNavigator(
  {
    Filters: FiltersScreen
  },
  {
    // navigationOptions: {
    //   drawerLabel: 'Filters!!!!'
    // },
    defaultNavigationOptions: defaultStackNavOptions
  }
);

const MainNavigator = createDrawerNavigator(
  {
    MealsFavs: {
      screen: MealsFavTabNavigator,
      navigationOptions: {
        drawerLabel: 'Meals'
      }
    },
    Filters: FiltersNavigator
  },
  {
    contentOptions: {
      activeTintColor: Colors.accentColor,
      labelStyle: {
        fontFamily: 'open-sans-bold'
      }
    }
  }
);

export default createAppContainer(MainNavigator);

从“React”导入React；
从“react native”导入{Platform，Text}；
进口{
createStackNavigator，
CreateBoottomTabNavigator，
createAppContainer，
createDrawerNavigator
}从“反应导航”；
从“@expo/vector icons”导入{Ionicons}；
从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
从“../screens/CategoriesScreen”导入分类屏幕；
从“../screens/CategoryMalsScreen”导入CategoryMalsScreen；
从“../screens/MealDetailScreen”导入MealDetailScreen；
从“../screens/FavoriteScreen”导入FavoriteScreen；
从“../screens/FilterScreen”导入FilterScreen；
从“../constants/Colors”导入颜色；
const defaultStackNavOptions={
头型：{
backgroundColor:Platform.OS=='android'？Colors.primaryColor:'
},
头饰样式：{
fontFamily:“开放式无边框”
},
headerBackTitleStyle：{
fontFamily:“开放式SAN”
},
headerTintColor:Platform.OS=='android'？'white'：Colors.primaryColor，
标题：“屏幕”
};
const MealsNavigator=createStackNavigator(
{
类别：{
屏幕：分类屏幕
},
类别：{
屏幕：CategoryMalsScreen
},
Mealdeail：Mealdeail屏幕
},
{
//initialRouteName:“类别”，
defaultNavigationOptions:defaultStackNavOptions
}
);
const FavNavigator=createStackNavigator(
{
收藏夹：收藏夹屏幕，
Mealdeail：Mealdeail屏幕
},
{
//initialRouteName:“类别”，
defaultNavigationOptions:defaultStackNavOptions
}
);
常量选项卡屏幕配置={
膳食：{
屏幕：MealsNavigator，
导航选项：{
tabBarIcon:tabInfo=>{
返回(
);
},
tabBarColor:Colors.primaryColor，
tabBarLabel：
Platform.OS==='android'(
餐
) : (
“膳食”
)
}
},
收藏夹：{
屏幕：FavNavigator，
导航选项：{
tabBarIcon:tabInfo=>{
返回；
},
tabBarColor:Colors.accentColor，
tabBarLabel：
Platform.OS==='android'(
最爱
) : (
“收藏夹”
)
}
}
};
const MealsFavTabNavigator=
Platform.OS==='android'
? createMaterialBottomTabNavigator（tabScreenConfig{
activeTintColor:'白色'，
是的，
酒吧风格：{
背景颜色：Colors.primaryColor
}
})
：CreateBoottomTabNavigator（tabScreenConfig{
选项卡选项：{
标签样式：{
fontFamily:“开放式SAN”
},
activeTintColor:Colors.accentColor
}
});
const FiltersNavigator=createStackNavigator(
{
过滤器：过滤器屏幕
},
{
//导航选项：{
//抽屉标签：“过滤器！！！！”
// },
defaultNavigationOptions:defaultStackNavOptions
}
);
const main navigator=createDrawerNavigator(
{
米尔斯法夫斯：{
屏幕：MealsFavTabNavigator，
导航选项：{
抽屉标签：“膳食”
}
},
过滤器：过滤器导航器
},
{
内容选项：{
activeTintColor:Colors.accentColor，
标签样式：{
fontFamily:“开放式无边框”
}
}
}
);
导出默认createAppContainer（MainNavigator）；

我不熟悉React-Native，但通过查看文档，似乎

expo

没有导出任何名为

AppLoading

的组件。现在看来，您需要替换“expo”中的

import{AppLoading}使用
从“expo应用程序加载”导入应用程序加载（您可能需要
npm安装expo应用程序加载
首先）非常感谢，我使用了您建议的导入并尝试了“npm安装expo应用程序加载”，但没有成功，然后我尝试了“expo安装expo应用程序加载”，成功了！对不起，我没有注意到安装命令不同。为误导而道歉，为注意到这一点而做得好！