React Native项目依赖冲突及Android构建失败技术求助

问题描述 #

1. npm依赖树解析错误 #

执行npm install时触发ERESOLVE错误，核心冲突为项目依赖的react@17.0.2与react-dom@18.2.0的peer依赖要求不匹配：

MINGW64 ~/Downloads/Eshop_mobile_app_react_native (master)
$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: Eshop@1.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project    
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^18.0.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 C:\Users\PC\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\PC\AppData\Local\npm-cache\_logs\2023-01-04T22_30_23_958Z-debug-0.log

2. Android构建失败 #

使用npm install --legacy-peer-deps跳过依赖检查后，运行npx react-native run-android出现构建失败，关键错误包括AGP版本不一致、Java编译错误：

MINGW64 ~/Downloads/Eshop_mobile_app_react_native (master)
$ npx react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1735 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
info Launching emulator...
info Successfully launched emulator.
info Installing the app...

> Task :react-native-gradle-plugin:compileJava

> Configure project :app
Unable to detect AGP versions for included builds. All projects in the build should use the same AGP version. Class name for the included build object: org.gradle.composite.internal.DefaultIncludedBuild$IncludedBuildImpl_Decorated.

> Configure project :lottie-react-native

> Configure project :react-native-reanimated
AAR for react-native-reanimated has been found
C:\Users\PC\Downloads\Eshop_mobile_app_react_native\node_modules\react-native-reanimated\android\react-native-reanimated-68-jsc.aar

Note: C:\Users\PC\Downloads\Eshop_mobile_app_react_native\android\app\src\debug\java\com\eshop\ecommerce\ReactNativeFlipper.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
2 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Get more help at https://help.gradle.org

BUILD FAILED in 48s

    at makeError (C:\Users\PC\Downloads\Eshop_mobile_app_react_native\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:174:9)
    at C:\Users\PC\Downloads\Eshop_mobile_app_react_native\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:278:16
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async runOnAllDevices (C:\Users\PC\Downloads\Eshop_mobile_app_react_native\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5)
    at async Command.handleAction (C:\Users\PC\Downloads\Eshop_mobile_app_react_native\node_modules\@react-native-community\cli\build\index.js:192:9)
info Run CLI with --verbose flag for more details.

解决方案 #

第一步：彻底修复依赖版本冲突 #

避免用--legacy-peer-deps强制跳过，直接对齐react与react-dom版本：

1. 卸载当前版本的react和react-dom：

npm uninstall react react-dom

2. 安装与项目React Native版本匹配的对应版本（例如React Native 0.68.x对应react@17.0.2、react-dom@17.0.2）：

npm install react@17.0.2 react-dom@17.0.2 --save

3. 重新执行npm install，此时依赖树可正常解析。

第二步：解决Android构建失败问题 #

1. 统一Android Gradle Plugin（AGP）版本

打开项目根目录下的android/build.gradle，在buildscript的dependencies块中，确保所有模块使用相同版本的AGP（例如React Native 0.68.x推荐使用7.3.1）：

buildscript {
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
        // 其他依赖配置
    }
}

同时检查android/settings.gradle中包含的子模块，确保它们的AGP版本与主项目一致。

2. 获取详细编译错误信息

执行带--verbose参数的构建命令，定位具体编译失败原因：

npx react-native run-android --verbose

针对输出的具体错误修复：

• 若为ReactNativeFlipper.java的废弃API问题，可替换为适配当前React Native版本的Flipper代码，或暂时注释调试阶段的Flipper配置。

3. 清理构建缓存

执行以下命令清理Gradle缓存和项目构建文件：

cd android
./gradlew clean
cd ..
npx react-native clean

完成后重新执行npx react-native run-android。

4. 适配react-native-reanimated版本

确保react-native-reanimated版本与React Native版本兼容（例如React Native 0.68.x对应react-native-reanimated@2.9.1）：

npm install react-native-reanimated@2.9.1 --save

安装后执行cd android && ./gradlew clean再重新构建。

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