react-native - 如何解决项目错误:元素类型无效?
问题描述
大家好!
我正在使用此存储库,无法启动 Expo 项目。这是完整的错误:
错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
检查App
.
包.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@expo-google-fonts/montserrat": "^0.1.0",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-community/viewpager": "^5.0.11",
"@react-navigation/bottom-tabs": "^5.11.11",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"expo": "~41.0.1",
"expo-linear-gradient": "^9.1.0",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.2.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.3.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "^7.9.0"
},
"private": true
}
应用程序.js:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import ChatStackNavigator from './src/navigations/Navigator';
import {
useFonts,
Montserrat_700Bold,
Montserrat_600SemiBold,
Montserrat_800ExtraBold
} from '@expo-google-fonts/montserrat';
import { AppLoading } from 'expo'
const App = () => {
let [fontsLoaded] = useFonts({
Montserrat_700Bold,
Montserrat_600SemiBold,
Montserrat_800ExtraBold
});
if(!fontsLoaded) {
return <AppLoading/>
}
return(
<NavigationContainer>
<ChatStackNavigator/>
</NavigationContainer>
)
}
export default App;
更新!
我重新安装node_modules
:
Node.js Command Prompt
在使用中转到您的项目目录cd
- 使用
yarn
ornpm
(我使用npm
) 安装rimraf
npm install rimraf -g
rimraf node_modules
- 现在使用重新安装所有模块
npm install
- 我在浏览器中有这个错误:
错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
检查App
.
和控制台中的这个错误:
C:/../DatingApp/App.js 尝试导入错误:“AppLoading”未从“expo”导出。
我去App.js
看看这段代码:
import { AppLoading } from 'expo'
...
if(!fontsLoaded) {
return <AppLoading/>
}
这是不正确的用法AppLoading
。我在这里找到了答案。所以,我要做什么:
- 使用控制台,
npm
我这样做:npm install expo-app-loarding
- 在我的代码中,我替换
import { AppLoading } from 'expo'
为import AppLoading from 'expo-app-loading';
- 我保存我的项目并使用控制台:
expo start --web
我在控制台中有另一个错误,现在我知道如何解决它
更新 2:
npm install expo-app-loading
不工作。
我试过expo install expo-app-loading
了也没有用。
我从以下位置删除了这些代码行App.js
:
1.
import AppLoading from 'expo-app-loading';
if(!fontsLoaded) {
return <AppLoading/>
}
现在该应用程序正在运行!
解决方案
您是否尝试过删除节点模块并重新安装项目?有时我会收到此错误并修复它。
推荐阅读
- python - 如何在具有其他特征(如 OpenCV 中的划痕)的灰度图像中提取文本
- mysql - Laravel - 如何立即更新表记录保存在其中
- java - Selenium:每当有新聊天可用时,如何单击聊天页面中的元素
- eof - 嗨,我收到 EOF 错误,我该如何纠正?
- r - 在箱线图中指定点符号的plotly问题
- scala - Scala 转换为泛型类型
- mysql - 如何在 MySql docker 镜像中安装 sudo 和 nano 命令
- reactjs - 在 ReactJs 中将数据从状态发送到组件
- c++ - MFC C++ 通过 WM_DEVICECHANGE 通知区分两个设备
- bdd - 如果满足特定条件,有没有办法在空手道中多次运行特定场景?