我正在自行构建我的第一个React Native应用程序。当我尝试在RN应用中设置导航时,遇到了与导入RN库有关的几个模块错误。我设法解决了它们。但是,现在我面临一个非常奇怪的红屏错误,我(坦率地说)根本不知道从哪里开始调试。
错误看起来像this.
我不知道这意味着什么,我检查了错误屏幕上提到的文件,但我听不懂。它们似乎是我不应该修改的非常低级的文件。
我有npm i <library-here>
以及react-native link <library-here>
,但没有解决问题。我已经销毁并重新安装了npm,但是那也没有用。我还重新启动了前端服务器,但这似乎是项目设置所固有的。
我感觉这与我的package.json
有关,因为我不得不将我的react-navigation
(保存前端文件的React Native文件夹)中的src
版本都更改为2.14.0
。我还更改了项目根目录中的package.json
,因此react-navigation
使用的是最新的稳定版本:^4.0.10
。
这是我的src/package.json
:
{
"name": "src",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"expo-image-picker": "^8.0.0",
"react": "^16.4.1",
"react-native": "0.61.5",
"react-native-screens": "^2.0.0-alpha.19",
"react-navigation": "2.14.0",
"react-navigation-stack": "^1.10.3"
},
"devDependencies": {
"@babel/core": "^7.7.5",
"@babel/runtime": "^7.7.5",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.7.2",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.57.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
这是我更改项目
package.json
的项目根目录中的react-navigation
:{
"dependencies": {
"react-native-gesture-handler": "^1.5.2",
"react-native-reanimated": "^1.4.0",
"react-native-screens": "^2.0.0-alpha.19",
"react-navigation": "^4.0.10"
}
}
如果需要,这是我的
AppNavigator.js
,在我的App.js
中称为:import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation";
import { Platform } from "react-native";
// Importing my screens here.
import LoginCreateAccountScreen from "../screens/LoginCreateAccountScreen";
import CreateAccountScreen from "../screens/CreateAccountScreen";
import LoginScreen from "../screens/LoginScreen";
import SplashScreen from "../screens/SplashScreen";
const MainNavigator = createStackNavigator({
SplashScreen: {screen: SplashScreen},
LoginCreateAccountScreen: {screen: LoginCreateAccountScreen},
LoginScreen: {screen: LoginScreen},
CreateAccountScreen: {screen: CreateAccountScreen},
});
export default createAppContainer(
createSwitchNavigator(
{
// You could add another route here for authentication.
// Read more at https://reactnavigation.org/docs/en/auth-flow.html
SplashScreen: SplashScreen,
LoginCreateAccountScreen: LoginCreateAccountScreen,
LoginScreen: LoginScreen,
CreateAccountScreen: CreateAccountScreen
},
{
initialRouteName: 'SplashScreen' // Entry
}
)
);
我的
App.js
:import React, { Component } from 'react';
import AppNavigator from './navigation/AppNavigator';
export default class App extends Component {
render() {
return <AppNavigator />;
}
}
任何和所有帮助表示赞赏。谢谢!
最佳答案
这可能是因为react
版本与react-native
版本不匹配。
尝试像这样将其更新为react@16.0.0-alpha.12
:
npm install react@16.0.0-alpha.12
或将
react@16.0.0-alpha.6
中的package.json
更改为react@16.0.0-alpha.12
并运行npm install
。