关于react native code push的JS端配置攻略

最新推荐文章于 2025-06-04 09:19:41 发布

aijason

最新推荐文章于 2025-06-04 09:19:41 发布

阅读量723

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react native 文章标签： react react native code push

本文链接：https://blog.youkuaiyun.com/u010379595/article/details/83512982

react native 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍如何使用CodePush实现React Native应用的热更新，包括在项目中引入高阶组件、检查更新、执行更新的方法，以及关键属性如检查频率、安装模式和强制更新的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 引用CodePush高阶组件，应用在项目根组件中：

import CodePush from "react-native-code-push";

class App extends Component {
}

const codePushOptions = { checkFrequency: CodePush.CheckFrequency.MANUAL };

App = CodePush(codePushOptions)(App);

export default codePush(App);

2. 使用CodePush提供的检查更新并执行更新的方法：

 // 检测是否有新的更新
      CodePush.checkForUpdate(codePushDeploymentKey)
        .then((update) => {
          Console.log('update', update);
          if (!update) {
            return;
          }
          if (update.isMandatory) {
            // 强制热更新
            Modal.alert(
              '更新提示',
              update.description ? `${update.description}` : '我们做了一些内容邀您更新体验',
              [
                {
                  text: '立即更新',
                  style: { color: '#eb3136', fontSize: getRealDP(45) },
                  onPress: () => {
                    CodePush.sync(
                      {
                        deploymentKey: codePushDeploymentKey,
                        mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE, // 强制热更则立即安装
                        updateDialog: false
                      },
                      (syncStatus) => {
                        switch (syncStatus) {
                          case CodePush.SyncStatus.CHECKING_FOR_UPDATE: // 正在查询CodePush服务器以进行更新。
                            break;
                          case CodePush.SyncStatus.DOWNLOADING_PACKAGE: // 正在从CodePush服务器下载可用更新。
                            // 强制弹窗更新，下载启动时显示进度条modal
                            DeviceEventEmitter.emit(DeviceEventName.HOT_UPDATE_MODAL_VISIBLE, {
                              totalPackageSize: conver(update.packageSize), // 热更新包总大小
                            });
                            break;
                          case CodePush.SyncStatus.AWAITING_USER_ACTION: // 提供更新，并向最终用户显示确认对话框。
                            break;
                          case CodePush.SyncStatus.INSTALLING_UPDATE: // 已下载可用更新，即将安装。
                            break;
                          case CodePush.SyncStatus.UP_TO_DATE: // 该应用程序是CodePush服务器的最新版本。
                            break;
                          case CodePush.SyncStatus.UPDATE_IGNORED: // 应用程序有一个可选的更新，最终用户选择忽略。
                            break;
                          case CodePush.SyncStatus.UPDATE_INSTALLED: // 已安装可用更新
                            break;
                          case CodePush.SyncStatus.UNKNOWN_ERROR: // 同步操作遇到未知错误
                            break;
                          default:
                            break;
                        }
                      },
                      ({ receivedBytes, totalBytes }) => {
                        // 标记热更新进度事件
                        DeviceEventEmitter.emit(DeviceEventName.HOT_UPDATE_PROGRESS,
                          {
                            progress: parseFloat(receivedBytes / totalBytes)
                              .toFixed(2) * 100, // 当前下载进度(0~100)
                            receivedPackageSize: conver(receivedBytes), // 热更新包下载过程大小
                          });
                      },
                      ({ isUpdateAppVersion, appVersion }) => {
                        Console.log('appVersion更新', `${isUpdateAppVersion}&&${appVersion}`);
                      }
                    );
                  },
                },
              ]);
          } else {
            // 静默热更新
            CodePush.sync(
              {
                deploymentKey: codePushDeploymentKey,
                installMode: CodePush.InstallMode.ON_NEXT_RESTART, // 静默则下次启动时安装
                updateDialog: false
              },
            );
          }
        });

接下来详细描述几个重要的属性：

1. “checkFrequency”即检查频率，在步骤1的codePushOptions中配置了这个参数，啥意思呢，我解释为检查更新的方式，有如下三种：

 // 禁用自动检查更新,用于手动检查更新,只有主动调用sync方法时检查
CodePush.CheckFrequency.MANUAL
// 热启动时检查更新，即APP在使用时退到后台重新打开时检查
CodePush.CheckFrequency.ON_APP_RESUME
// 冷启动时检查更新，即APP杀死进程后重启时检查
CodePush.CheckFrequency.ON_APP_START

2. “installMode”即安装模式

codePush.InstallMode.IMMEDIATE 安装更新并立刻重启应用

codePush.InstallMode.ON_NEXT_RESTART 安装更新，但不立马重启，直到下一次重新进入

codePush.InstallMode.ON_NEXT_RESUME 安装更新，但是不立马重新启动，直到下一次从后台恢复到前台

codePush.InstallMode.ON_NEXT_SUSPEND 下一次处于后台时

3. "isMandatory" 是CheckForUpdate返回的一个重要参数，即是否强制热更新。true 强制，false 不强制。

4. 注意：建议不使用code push 源码内的系统Alert弹窗api，经反馈部分安卓机型不能正常显示更新弹窗，需要自定义弹窗或者使用第三方Modal，例"antd-mobile"库的modal窗或“react-native-modal”等。