React Native CodePush 在 Android 平台上的完整配置指南

React Native CodePush 在 Android 平台上的完整配置指南

前言

React Native CodePush 是一个强大的热更新解决方案，它允许开发者绕过应用商店审核流程，直接将 JavaScript 代码和资源更新推送到用户设备。本文将详细介绍如何在 Android 平台上配置 CodePush，涵盖不同 React Native 版本的安装和配置方法。

环境准备

在开始之前，请确保你已经：

1. 创建了 CodePush 应用并获取了部署密钥
2. 搭建好 React Native 开发环境
3. 初始化了 React Native 项目

针对 React Native 0.60+ 版本的配置

对于现代 React Native 项目（0.60及以上版本），配置过程相对简单：

1. Gradle 配置

在 android/settings.gradle 文件末尾添加：

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

在 android/app/build.gradle 文件末尾添加：

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

2. 修改 MainApplication 文件

根据 React Native 版本选择对应的修改方式：

React Native 0.73+ (Kotlin):

import ***.microsoft.codepush.react.CodePush

class MainApplication : Application(), ReactApplication {
    override val reactNativeHost: ReactNativeHost =
        object : DefaultReactNativeHost(this) {
            override fun getJSBundleFile(): String {
                return CodePush.getJSBundleFile() 
            }
        }
}

React Native 0.72及以下 (Java):

import ***.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

3. 添加部署密钥

在 android/app/src/main/res/values/strings.xml 中添加：

<string name="CodePushDeploymentKey">你的部署密钥</string>

针对 React Native 0.60 以下版本的配置

对于较旧的 React Native 项目，配置过程略有不同：

安装方式选择

有两种安装方式可供选择：

1. 使用 RNPM 自动安装（推荐）

react-native link react-native-code-push

或对于 RN < 0.27:

rnpm link react-native-code-push

2. 手动安装

手动修改 Gradle 配置：

// settings.gradle
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

// app/build.gradle
dependencies {
    ***pile project(':react-native-code-push')
}
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

配置 MainApplication

根据 React Native 版本进行相应修改：

React Native 0.29-0.59:

@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CodePush("deployment-key", MainApplication.this, BuildConfig.DEBUG)
    );
}

React Native 0.19-0.28:

@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CodePush("deployment-key", this, BuildConfig.DEBUG)
    );
}

特殊场景配置

后台 React 实例

如果你的应用会在后台启动 React Native 实例（例如推送通知处理），需要额外配置：

React Native ≥ 0.29:

public class MainApplication extends Application implements ReactApplication {
    private final MyReactNativeHost mReactNativeHost = new MyReactNativeHost(this);

    @Override
    public void onCreate() {
        CodePush.setReactInstanceHolder(mReactNativeHost);
        super.onCreate();
    }
}

WIX React Native Navigation 集成

对于使用 WIX React Native Navigation 的项目：

版本 1.x:

public class MainApplication extends NavigationApplication implements ReactInstanceHolder {
    @Override
    public String getJSBundleFile() {
        return CodePush.getJSBundleFile();
    }
    
    @Override
    public ReactInstanceManager getReactInstanceManager() {
        return getReactNativeHost().getReactInstanceManager();
    }
}

版本 2.x:

public class MainApplication extends NavigationApplication {
    @Override
    protected ReactGateway createReactGateway() {
        ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
            @Override
            protected String getJSBundleFile() {
                return CodePush.getJSBundleFile();
            }
        };
        return new ReactGateway(this, isDebug(), host);
    }
}

最佳实践建议

1. 多环境部署：为开发、测试和生产环境创建不同的部署
2. 密钥管理：不要将生产环境密钥硬编码在代码中
3. 测试策略：先在 staging 环境测试更新，再推送到 production
4. 版本兼容：确保 CodePush 版本与 React Native 版本兼容

常见问题排查

1. 找不到 JS Bundle：检查 getJSBundleFile() 方法是否正确重写
2. 密钥无效：确认部署密钥与应用程序匹配
3. Gradle 同步失败：检查项目路径和依赖项是否正确
4. 更新不生效：确保没有禁用 CodePush 或忽略更新

通过以上详细步骤，你应该能够成功在 Android 平台上集成 CodePush 热更新功能。根据你的具体 React Native 版本和项目结构选择对应的配置方式，享受热更新带来的开发效率提升吧！