React Native 0.65项目升级依赖冲突问题求助

问题背景 #

升级React Native项目时，执行npm install触发依赖冲突：react-navigation-drawer@1.4.0要求的peer依赖react-native-screens版本为^1.0.0 || ^1.0.0-alpha，但项目当前依赖react-native-screens@^3.6.0，使用npm i --legacy-peer-deps后项目仍无法正常运行。

错误日志 #

Mac-mini xxxx % npm i                                                                 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-navigation-drawer@1.4.0
npm ERR! Found: react-native-screens@3.6.0
npm ERR! node_modules/react-native-screens
npm ERR!   react-native-screens@"^3.6.0" from the root project
npm ERR!   peer react-native-screens@">= 3.0.0" from @react-navigation/drawer@6.1.4
npm ERR!   node_modules/@react-navigation/drawer
npm ERR!     @react-navigation/drawer@"^6.1.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-screens@"^1.0.0 || ^1.0.0-alpha" from react-navigation-drawer@1.4.0
npm ERR! node_modules/react-navigation-drawer
npm ERR!   react-navigation-drawer@"1.4.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react-native-screens@1.0.0-alpha.23
npm ERR! node_modules/react-native-screens
npm ERR!   peer react-native-screens@"^1.0.0 || ^1.0.0-alpha" from react-navigation-drawer@1.4.0
npm ERR!   node_modules/react-navigation-drawer
npm ERR!     react-navigation-drawer@"1.4.0" 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 /Users/xxxxx/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

项目package.json配置 #

{
  "name": "abc",
  "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-async-storage/async-storage": "^1.17.4",
    "@react-native-community/cameraroll": "^4.1.2",
    "@react-native-community/netinfo": "^6.0.0",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-firebase/app": "^12.8.0",
    "@react-native-firebase/messaging": "^12.8.0",
    "@react-navigation/drawer": "^6.1.4",
    "axios": "^0.21.1",
    "date-fns": "^2.28.0",
    "deprecated-react-native-listview": "0.0.7",
    "moment": "^2.29.1",
    "native-base": "^2.12.2",
    "react": "17.0.2",
    "react-native": "0.65",
    "react-native-calendar-events": "^2.2.0",
    "react-native-calendars": "^1.1262.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-hyperlink": "0.0.19",
    "react-native-image-picker": "^4.0.3",
    "react-native-image-viewing": "^0.2.0",
    "react-native-keyboard-aware-scroll-view": "^0.5.0",
    "react-native-loading-spinner-overlay": "^2.0.0",
    "react-native-modal": "^11.10.0",
    "react-native-modal-overlay": "^1.3.1",
    "react-native-push-notification": "^8.1.0",
    "react-native-reanimated": "^2.3.0-alpha.2",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.6.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^12.1.1",
    "react-native-version-info": "^1.1.1",
    "react-navigation": "^4.4.4",
    "react-navigation-animated-switch": "^0.6.4",
    "react-navigation-drawer": "1.4.0",
    "react-navigation-stack": "1.7.3",
    "react-navigation-tabs": "1.2.0",
    "react-redux": "^7.2.4",
    "redux": "^4.1.0",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.12.0",
    "styled-components": "^5.3.0",
    "styled-system": "^5.1.5",
    "teaset": "^0.7.5"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/runtime": "^7.15.3",
    "@react-native-community/eslint-config": "^3.0.0",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "jest": "^27.0.6",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./src/assests/fonts/"
    ]
  }
}

解决方案 #

1. 清理冲突的导航依赖，统一版本 #

你的项目同时安装了旧版react-navigation@4.x生态（react-navigation-drawer@1.4.0、react-navigation-stack等）和新版@react-navigation/drawer@6.x，这是核心冲突根源。新版导航与旧版不兼容，需彻底移除旧版：

• 执行命令卸载所有旧版导航包：

  npm uninstall react-navigation react-navigation-drawer react-navigation-stack react-navigation-tabs react-navigation-animated-switch
  

• 保留新版@react-navigation/drawer，并确保配套依赖适配RN 0.65：
  • 升级react-native-reanimated到稳定版（当前alpha版易引发运行问题）：

    npm install react-native-reanimated@^2.2.0
    

  • 其他配套依赖（react-native-gesture-handler、react-native-safe-area-context、react-native-screens）当前版本已适配，无需调整。

2. 清理缓存并重新安装依赖 #

• 删除本地依赖目录和锁文件：

  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

• 清除Metro缓存，避免缓存导致的运行异常：

  npx react-native start --reset-cache
  

3. 验证项目运行 #

分别启动iOS和Android项目，确认无报错：

npm run ios
npm run android

内容的提问来源于stack exchange，提问作者akash