React Native 0.72.0升级时react-native-webview编译失败求助

我正在将React Native应用升级至0.72.0版本，因react-native-webview库导致构建失败，错误信息如下：

构建操作失败。
无法创建任务':react-native-webview:compileDebugKotlin'。
无法创建任务':react-native-webview:compileDebugKotlin'。
找不到枚举常量org.jetbrains.kotlin.gradle.plugin.PropertiesProvider.JvmTargetValidationMode.WARNİNG

android/build.gradle #

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // 我们使用NDK 23，它同时支持M1架构，也是AGP的并行NDK版本。
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.10" // 添加此行...从Android Studio获取
    }
}

android/app/build.gradle #

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    namespace "com.xxxxx.xxxx"
    defaultConfig {
        applicationId "com.xxxxxx"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        multiDexEnabled true // 添加此行
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // 注意！生产环境中，您需要生成自己的密钥库文件。
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

dependencies {
    // react-native的版本由React Native Gradle插件设置
    implementation("com.facebook.react:react-android")
    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
    
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

package.json #

{
  "name": "xxxx",
  "version": "0.0.8",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@ant-design/react-native": "^4.2.0",
    "@react-native-async-storage/async-storage": "^1.18.2",
    "@react-native-clipboard/clipboard": "^1.10.0",
    "@react-native-community/datetimepicker": "^7.6.2",
    "@react-native-community/netinfo": "^9.0.0",
    "@react-native-community/progress-view": "^1.3.1",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-firebase/analytics": "^14.12.0",
    "@react-native-firebase/app": "^14.12.0",
    "@react-native-firebase/firestore": "14.12.0",
    "@react-native-firebase/messaging": "^14.12.0",
    "@react-native-masked-view/masked-view": "^0.2.9",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.2.5",
    "deprecated-react-native-prop-types": "^4.1.0",
    "formik": "^2.4.2",
    "link-preview-js": "^2.1.8",
    "moment": "^2.29.1",
    "patch-package": "^6.4.7",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-native": "^0.72.0",
    "react-native-actionsheet": "^2.4.2",
    "react-native-calendars": "^1.1263.0",
    "react-native-device-info": "^8.1.3",
    "react-native-document-picker": "5.2.0",
    "react-native-elements": "^1.1.0",
    "react-native-encrypted-storage": "^4.0.2",
    "react-native-event-listeners": "^1.0.7",
    "react-native-file-viewer": "^2.1.4",
    "react-native-flash-message": "^0.1.23",
    "react-native-fs": "^2.18.0",
    "react-native-gesture-handler": "1.10.3",
    "react-native-htmlview": "^0.16.0",
    "react-native-hyperlink": "0.0.19",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-material-textfield": "^0.16.1",
    "react-native-mime-types": "^2.3.0",
    "react-native-modal": "^13.0.0",
    "react-native-modal-datetime-picker": "^17.1.0",
    "react-native-multiple-select": "^0.5.12",
    "react-native-pdf": "^6.3.0",
    "react-native-percentage-circle": "^1.0.7",
    "react-native-progress": "^4.1.2",
    "react-native-reanimated": "^3.6.1",
    "react-native-render-html": "^6.1.0",
    "react-native-screens": "3.9.0",
    "react-native-svg": "^13.14.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-uuid": "^2.0.1",
    "react-native-vector-icons": "8.1.0",
    "react-native-version-number": "^0.3.6",
    "react-native-video-controls": "^2.8.1",
    "react-native-youtube-iframe": "^2.3.0",
    "react-redux": "^7.2.4",
    "redux-persist": "^6.0.0",
    "redux-persist-seamless-immutable": "^2.0.0",
    "redux-saga": "^1.1.3",
    "reduxsauce": "^1.2.1",
    "rn-fetch-blob": "0.12.0",
    "seamless-immutable": "^7.1.4",
    "sonarqube-scanner": "^2.8.1",
    "yup": "^0.27.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^0.72.2",
    "@react-native/babel-preset": "^0.76.5",
    "@react-native/metro-config": "^0.76.3",
    "@rnx-kit/align-deps": "^2.3.2",
    "babel-jest": "^29.2.1",
    "eslint": "8.19.0",
    "jest": "^29.2.1",
    "react-native-svg-transformer": "^0.14.3",
    "react-test-renderer": "18.2.0"
  },
  "rnx-kit": {
    "kitType": "app",
    "alignDeps": {
      "requirements": [
        "react-native@0.72"
      ],
      "capabilities": [
        "animation",
        "clipboard",
        "core",
        "core-android",
        "core-ios",
        "datetime-picker",
        "filesystem",
        "gestures",
        "html",
        "jest",
        "masked-view",
        "modal",
        "navigation/native",
        "netinfo",
        "react",
        "react-test-renderer",
        "safe-area",
        "screens",
        "storage",
        "svg",
        "webview"
      ]
    }
  },
  "engines": {
    "node": ">=16"
  }
}

解决方案 #

这个错误源于Kotlin Gradle插件版本与React Native 0.72.0不兼容，React Native 0.72.0要求使用1.8.0及以上版本的Kotlin Gradle插件，当前使用的1.7.10版本无法匹配。

1. 更新Kotlin Gradle插件版本
   修改android/build.gradle中的依赖配置：

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.22"

（1.8.22是React Native 0.72推荐的稳定版本，也可选择1.8.x系列的其他版本）

2. 清理并重新构建项目
   执行以下命令：

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

3. 确保react-native-webview版本兼容
   建议升级到适配React Native 0.72的最新稳定版：

npm install react-native-webview@latest

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