我正在自行构建我的第一个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

07-28 03:00
查看更多