React Native从0.71.11升级到0.73.7后compileDebugKotlin任务失败

问题 #

按照React Native升级助手指引，将RN从0.71.11升级到0.73.7后，执行yarn android出现以下编译错误：

• android/app/src/main/java/com/useapp/MainApplication.kt:18:41：getPackages的返回类型不是重写成员的子类型
• android/app/src/main/java/com/useapp/MainApplication.kt:19:24：类型不匹配，推断类型为ArrayList<ReactPackage!>!但期望是List
• android/app/src/main/java/com/useapp/MainApplication.kt:35:13：未解析的引用：ReactHost

构建失败，提示:app:compileDebugKotlin任务执行失败。相关代码如下：

MainApplication.kt #

package xxx.xxx

import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.soloader.SoLoader
import java.util.List
import com.vinzscam.reactnativefileviewer.RNFileViewerPackage
import com.oblador.vectoricons.VectorIconsPackage

class MainApplication : Application(), ReactApplication {

    override val reactNativeHost: ReactNativeHost =
        object : DefaultReactNativeHost(this) {
            override fun getPackages(): List<ReactPackage> {
                return PackageList(this).packages // Use PackageList to get packages
            }

            override fun getJSMainModuleName(): String = "index"

            override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

            override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
            override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
        }

    override fun onCreate() {
        super.onCreate()
        SoLoader.init(this, false)
        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
            // If you opted-in for the New Architecture, we load the native entry point for this app.
            ReactHost.load() // This seems to be a custom function, make sure it's defined correctly
        }
        // ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
        // This line is commented out as ReactNativeFlipper seems unresolved in your code
    }
}

MainActivity.kt #

package xxx.xxx
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultReactActivityDelegate
import android.os.Bundle

class MainActivity : ReactActivity() {

    /**
     * Returns the name of the main component registered from JavaScript. This is used to schedule
     * rendering of the component.
     */
    override fun getMainComponentName(): String = "xxx"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    /**
     * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
     * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
     */
    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, "useapp") // Provide mainComponentName as a string
}

解决方案 #

1. 修复getPackages的类型问题 #

RN 0.73中DefaultReactNativeHost的getPackages要求返回Kotlin的List<ReactPackage>，但你当前导入的是Java的java.util.List，且PackageList.packages返回的是ArrayList：

• 将导入的java.util.List替换为kotlin.collections.List
• 在返回packages时调用toList()转换为Kotlin标准List类型

2. 修复ReactHost未解析问题 #

RN 0.73已移除ReactHost.load()，新架构加载方式变更。若启用新架构，使用ReactNativeHost.loadReactNative(this)；若未启用，可直接移除该代码块。

3. 修复MainActivity组件名不一致问题 #

createReactActivityDelegate中硬编码的"useapp"和getMainComponentName返回的"xxx"需保持一致，建议直接引用mainComponentName避免硬编码错误。

修改后的完整代码 #

MainApplication.kt

package xxx.xxx

import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.soloader.SoLoader
import kotlin.collections.List // 替换为Kotlin的List
import com.vinzscam.reactnativefileviewer.RNFileViewerPackage
import com.oblador.vectoricons.VectorIconsPackage

class MainApplication : Application(), ReactApplication {

    override val reactNativeHost: ReactNativeHost =
        object : DefaultReactNativeHost(this) {
            override fun getPackages(): List<ReactPackage> {
                // 转换为Kotlin List解决类型不匹配
                return PackageList(this).packages.toList()
            }

            override fun getJSMainModuleName(): String = "index"

            override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

            override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
            override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
        }

    override fun onCreate() {
        super.onCreate()
        SoLoader.init(this, false)
        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
            // RN 0.73加载新架构的正确方式
            com.facebook.react.ReactNativeHost.loadReactNative(this)
        }
        // 如需启用Flipper，请确保已添加对应依赖和配置后取消注释
        // ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
    }
}

MainActivity.kt

package xxx.xxx
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultReactActivityDelegate
import android.os.Bundle

class MainActivity : ReactActivity() {

    override fun getMainComponentName(): String = "xxx"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName) // 复用已定义的组件名，避免不一致
}

验证步骤 #

1. 执行./gradlew clean清理构建缓存
2. 重新运行yarn android

内容的提问来源于stack exchange，提问作者Kauã Librelato