React Native 0.63.3 Android非debug构建无法正常加载JS bundle问题

问题根源 #

RN 0.63.x版本的安卓构建逻辑中，默认只从app/src/main/assets/目录加载JS bundle，bundleJsAndAssets任务生成的变体专属bundle存放在build目录下，不会被自动识别加载。

解决方案1（无需修改Java代码，推荐） #

步骤1：修改app/build.gradle的react配置块 #

为每个非debug变体指定bundle输出路径到对应变体的专属资源目录，保留原有配置（如enableHermes等）即可：

project.ext.react = [
    // 原有配置不变，新增以下内容
    jsBundleDirRelease: "$projectDir/src/release/assets/",
    jsBundleDirDev: "$projectDir/src/dev/assets/",
    jsBundleDirAlphaRelease: "$projectDir/src/alphaRelease/assets/",
    resourcesDirRelease: "$projectDir/src/release/res/",
    resourcesDirDev: "$projectDir/src/dev/res/",
    resourcesDirAlphaRelease: "$projectDir/src/alphaRelease/res/",
]

步骤2：配置构建变体的资源目录 #

在同一个app/build.gradle的android块下添加sourceSets配置，原有配置（compileSdk、buildTypes、productFlavors等）保持不变：

android {
    // 原有配置不变，新增以下内容
    sourceSets {
        release {
            assets.srcDirs = ['src/release/assets']
        }
        dev {
            assets.srcDirs = ['src/dev/assets']
        }
        alphaRelease {
            assets.srcDirs = ['src/alphaRelease/assets']
        }
    }
}

步骤3：清理旧文件 #

删除之前手动生成的app/src/main/assets/index.android.bundle文件，避免构建时优先加载旧文件。

解决方案2（修改加载逻辑，适配build目录现有bundle） #

如果不想调整gradle配置，可以直接修改MainApplication.java中的bundle加载逻辑，动态读取对应变体build目录下的bundle：

import com.facebook.react.BuildConfig;

public class MainApplication extends Application implements ReactApplication {
    // 保留原有代码，新增以下重写方法
    @Override
    protected String getJSBundleFile() {
        if (BuildConfig.DEBUG) {
            return super.getJSBundleFile();
        }
        String variant = BuildConfig.FLAVOR + BuildConfig.BUILD_TYPE;
        return getApplicationInfo().dataDir + "/cache/" + variant.toLowerCase() + "/index.android.bundle";
    }
}

验证方法 #

执行./gradlew clean assembleAlphaRelease构建安装，无需手动执行bundle命令即可正常运行。

内容的提问来源于stack exchange，提问作者Esben von Buchwald