无法使用 react-navigation-stack 解析依赖关系树答案

【问题标题】：Unable to resolve dependency tree with react-navigation-stack无法使用 react-navigation-stack 解析依赖关系树
【发布时间】：2021-06-15 00:32:08
【问题描述】：

我正在尝试在 React-native 中学习导航，我想运行以下代码：

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from '@react-navigation/stack';

export default class App extends Component {
  render() {
    return <AppContainer />;
  }
}

class HomeScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Home</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

const AppContainer = createAppContainer(AppNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

但是当我尝试使用 android 运行时，出现如下错误：

 Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/upgrading-from-4.x for migration guide.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

经过简短的研究，我尝试重新安装所有依赖项和东西。但是当我尝试运行“expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view”时仍然出现错误>：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: NavigationApp@0.0.1
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0" from @react-native-community/masked-view@0.1.10
npm ERR! node_modules/@react-native-community/masked-view
npm ERR!   @react-native-community/masked-view@"^0.1.10" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\campo\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\campo\AppData\Local\npm-cache\_logs\2021-03-17T16_11_56_237Z-debug.log

我在网上找不到任何更新的解决方案。最后是我的 package.json 文件：

{
  "name": "NavigationApp",
  "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": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "fbjs": "^3.0.0",
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.0.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^2.18.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-navigation": "^4.1.1",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

【问题讨论】：

标签： javascript reactjs react-native npm react-navigation-stack

【解决方案1】：

对我来说，以下工作：

npm install @react-native-community/masked-view --force

【讨论】：

【解决方案2】：

我猜下面的代码不足以让 npm 保存我们的依赖。

npm install @react-native-community/masked-view --force

当我也使用 --save 选项时，它对我有用。请尝试以下操作：

npm install --save @react-native-community/masked-view --force
npm install react-native-safe-area-context

【讨论】：