React Native项目Gradle版本兼容与构建错误修复求助

问题背景 #

需要解决Gradle版本废弃问题，同时在保持依赖版本尽可能最新的前提下，配置兼容的依赖版本以避免Android运行时冲突。项目的package.json配置如下：

{"name": "clone","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-navigation/bottom-tabs": "^6.2.0","@react-navigation/native": "^6.0.8","@react-navigation/native-stack": "^6.4.1","@reduxjs/toolkit": "^1.7.1","react": "17.0.2","react-native": "0.67.0","react-native-encrypted-storage": "^4.0.2","react-native-extended-stylesheet": "^0.12.0","react-native-safe-area-context": "^3.3.2","react-native-screens": "^3.10.2","react-redux": "^7.2.6","redux": "^4.1.2"},"devDependencies": {"@babel/core": "^7.12.9","@babel/runtime": "^7.17.0","@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.66.2","react-test-renderer": "17.0.2"},"jest": {"preset": "react-native"}}

运行Android项目时出现以下构建错误：

BUILD FAILED in 5s
error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build completed with 2 failures. 1: Task failed with an exception. ----------- * Where: Build file 'C:\Users\Abdul\Documents\Personal Instagram Clone\Frontend\instagramClone\android\app\build.gradle' line: 84 * What went wrong: A problem occurred evaluating project ':app'. > Could not read script 'C:\Users\Abdul\Documents\Personal Instagram Clone\Frontend\instagramClone\node_modules\react-native\react.gradle' as it does not exist. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. ============================================================================== 2: Task failed with an exception. ----------- * What went wrong: A problem occurred configuring project ':app'. > com.android.builder.errors.EvalIssueException: compileSdkVersion is not specified. Please add it to build.gradle * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. ============================================================================== BUILD FAILED in 5s.
info Run CLI with --verbose flag for more details.

错误修复步骤 #

1. 解决react.gradle文件缺失问题 #

• 检查项目根目录下的node_modules/react-native文件夹是否完整，若缺失或损坏，执行以下命令重新安装依赖：

  rm -rf node_modules && rm package-lock.json yarn.lock && npm install
  

• 打开android/app/build.gradle第84行，确认脚本引用路径正确，默认应为：

  apply from: "../../node_modules/react-native/react.gradle"
  

  若路径与项目结构不匹配，修正为对应相对路径。

2. 解决compileSdkVersion未指定问题 #

打开android/app/build.gradle，在android代码块中添加或完善版本配置（React Native 0.67.0推荐使用compileSdkVersion 31）：

android {
    compileSdkVersion 31
    buildToolsVersion "31.0.0"

    defaultConfig {
        applicationId "com.clone"
        minSdkVersion 21
        targetSdkVersion 31
        versionCode 1
        versionName "1.0"
    }
    // 其他原有配置...
}

依赖版本兼容优化（保持最新且避免冲突） #

1. 更新核心依赖版本 #

修改package.json中的依赖版本，升级到与React Native 0.67.0兼容的最新稳定版：

"dependencies": {
  "@react-navigation/bottom-tabs": "^6.5.8",
  "@react-navigation/native": "^6.1.7",
  "@react-navigation/native-stack": "^6.9.13",
  "@reduxjs/toolkit": "^1.9.7",
  "react": "17.0.2",
  "react-native": "0.67.0",
  "react-native-encrypted-storage": "^4.0.3",
  "react-native-extended-stylesheet": "^0.12.0",
  "react-native-safe-area-context": "^3.4.1",
  "react-native-screens": "^3.15.0",
  "react-redux": "^7.2.9",
  "redux": "^4.2.1"
},
"devDependencies": {
  "@babel/core": "^7.23.2",
  "@babel/runtime": "^7.23.2",
  "@react-native-community/eslint-config": "^3.2.0",
  "babel-jest": "^26.6.3",
  "eslint": "^7.32.0",
  "jest": "^26.6.3",
  "metro-react-native-babel-preset": "^0.67.0",
  "react-test-renderer": "17.0.2"
}

执行npm install完成依赖更新。

2. 升级Gradle相关配置 #

• 打开android/gradle/wrapper/gradle-wrapper.properties，更新Gradle版本：

  distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-all.zip
  

• 打开android/build.gradle，更新Android Gradle Plugin版本及全局配置：

  buildscript {
      ext {
          buildToolsVersion = "31.0.0"
          minSdkVersion = 21
          compileSdkVersion = 31
          targetSdkVersion = 31
          ndkVersion = "23.1.7779620"
      }
      repositories {
          google()
          mavenCentral()
      }
      dependencies {
          classpath "com.android.tools.build:gradle:7.0.4"
          // 其他原有依赖...
      }
  }
  

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