React Native Navigation集成Android构建失败问题求助

问题描述 #

学习React Native Navigation时，按官方文档完成依赖安装和基础代码编写后，执行npx react-native run-android构建失败，触发两个核心报错：

• 找不到id为'kotlin-android'的插件
• react-native-navigation模块未指定compileSdkVersion

复现步骤 #

• 执行npm install --save react-native-navigation
• 编写基础导航代码
• 执行npx react-native start
• 执行npx react-native run-android

完整报错日志 #

alaeddine@Ala-Dev:~/Apps/GitaApp$ npx react-native run-android
warn Package react-native-navigation contains invalid configuration: "dependency.assets" is not allowed,"dependency.hooks" is not allowed. Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.
info Starting JS server...
info Installing the app...

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/7.5.1/userguide/command_line_interface.html#sec:command_line_warnings
5 actionable tasks: 5 up-to-date

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* Where:
Build file '/home/alaeddine/Apps/GitaApp/node_modules/react-native-navigation/lib/android/app/build.gradle' line: 5

* What went wrong:
A problem occurred evaluating project ':react-native-navigation'.
> Plugin with id 'kotlin-android' not found.

* 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.
==============================================================================

2: Task failed with an exception.
-----------
* What went wrong:
A problem occurred configuring project ':react-native-navigation'.
> 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 10s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* Where:
Build file '/home/alaeddine/Apps/GitaApp/node_modules/react-native-navigation/lib/android/app/build.gradle' line: 5

* What went wrong:
A problem occurred evaluating project ':react-native-navigation'.
> Plugin with id 'kotlin-android' not found.

* 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.
==============================================================================

2: Task failed with an exception.
-----------
* What went wrong:
A problem occurred configuring project ':react-native-navigation'.
> 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 10s

    at makeError (/home/alaeddine/Apps/GitaApp/node_modules/@react-native-community/cli-platform-android/node_modules/execa/index.js:174:9)
    at /home/alaeddine/Apps/GitaApp/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 (/home/alaeddine/Apps/GitaApp/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:109:5)
    at async Command.handleAction (/home/alaeddine/Apps/GitaApp/node_modules/@react-native-community/cli/build/index.js:142:9)
info Run CLI with --verbose flag for more details.

项目根目录build.gradle配置 #

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31

        if (System.properties['os.arch'] == "aarch64") {
            // For M1 Users we need to use the NDK 24 which added support for aarch64
            ndkVersion = "24.0.8215888"
        } else {
            // Otherwise we default to the side-by-side NDK version from AGP.
            ndkVersion = "21.4.7075529"
        }
    }
    repositories {
        google()
        mavenCentral() 
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.2.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:5.0.1")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}

解决方案 #

1. 引入Kotlin Gradle插件 #

React Native Navigation的Android端依赖Kotlin，你的根项目未配置Kotlin插件导致报错。修改根目录build.gradle的buildscript依赖块，添加Kotlin插件：

buildscript {
    // 保留原有ext和repositories配置
    dependencies {
        classpath("com.android.tools.build:gradle:7.2.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:5.0.1")
        // 添加Kotlin插件，版本与Gradle 7.2.1适配，这里用1.7.20
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.20"
    }
}

2. 统一子项目编译配置 #

虽然根项目已定义compileSdkVersion，但react-native-navigation模块未读取该变量。在根build.gradle末尾添加subprojects块，强制所有Android子项目继承根项目的编译配置：

allprojects {
    // 保留原有repositories配置
}

// 新增子项目配置块
subprojects {
    afterEvaluate { project ->
        if (project.hasProperty('android')) {
            project.android {
                compileSdkVersion rootProject.ext.compileSdkVersion
                buildToolsVersion rootProject.ext.buildToolsVersion
                defaultConfig {
                    minSdkVersion rootProject.ext.minSdkVersion
                    targetSdkVersion rootProject.ext.targetSdkVersion
                }
            }
        }
    }
}

3. 清理缓存并重新构建 #

执行以下命令清理Gradle缓存，然后重新构建项目：

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

原因说明 #

• kotlin-android插件缺失：React Native Navigation的Android实现基于Kotlin，必须在项目中引入Kotlin Gradle插件才能完成编译。
• compileSdkVersion未指定：react-native-navigation的模块build.gradle未单独配置编译版本，也未继承根项目的全局配置，通过subprojects块可强制所有子项目使用统一的编译参数。

内容的提问来源于stack exchange，提问作者Ala Eddine Menai