React Native 全栈开发实战班 - 打包发布之热更新

在完成 React Native 应用的开发与性能优化后，下一步就是将应用打包并发布到各大应用市场，如 Apple App Store 和 Google Play Store。本章节已经详细介绍了打包与发布的流程，包括 Android 和 iOS 平台的配置、打包步骤、签名配置以及发布到应用市场。

---

3. 版本更新机制

在应用发布后，持续的版本更新是保持应用稳定、功能完善和用户体验良好的关键。React Native 应用可以通过多种方式进行版本更新，包括：

1. 全量更新（Full Update）： 用户需要下载并安装整个应用的新版本。
2. 增量更新（Delta Update）： 只下载和安装应用中有变化的部分。
3. 热更新（Code Push）： 通过远程服务器动态更新应用的 JavaScript 代码和资源，而无需重新发布应用。

本章节将重点介绍如何使用 CodePush 实现 React Native 应用的热更新。

---

3.1 热更新概述

热更新（Hot Update） 是一种在不发布新版本应用的情况下，更新应用代码和资源的技术。热更新可以显著缩短更新周期，提高用户体验，并减少应用商店审核的等待时间。

热更新的优势：

• 快速迭代： 可以快速发布新功能、修复 bug，无需等待应用商店审核。
• 用户体验： 用户无需重新下载整个应用，即可获取最新更新。
• 节省带宽： 只下载有变化的部分，减少用户流量消耗。

常见的热更新解决方案：

• CodePush: 由 Microsoft 提供的免费开源热更新服务，支持 React Native 和 Cordova。
• Expo Updates: Expo 提供的热更新服务，适用于使用 Expo 工具链的项目。
• 自建热更新服务: 使用第三方 CDN 或自建服务器，实现自定义的热更新流程。

本章节将重点介绍如何使用 CodePush 实现 React Native 应用的热更新。

---

3.2 使用 CodePush 实现热更新

CodePush 是一个由 Microsoft 提供的免费开源热更新服务，支持 React Native 和 Cordova 应用。它通过云端服务器分发应用的更新包，实现动态更新。

3.2.1 安装 CodePush CLI

首先，需要安装 CodePush CLI 工具。

npm install -g code-push-cli

3.2.2 注册 CodePush 账号

使用 CodePush CLI 注册一个 CodePush 账号。

code-push register

按照提示完成注册。

3.2.3 登录 CodePush

使用 CodePush CLI 登录。

code-push login

按照提示完成登录。

3.2.4 安装 CodePush SDK

在 React Native 项目中安装 CodePush SDK。

npm install react-native-code-push

链接原生依赖（React Native 0.60 及以上版本自动链接）：

cd ios
pod install
cd ..

3.2.5 配置 CodePush

1. Android 配置:

   • 在 android/app/build.gradle 文件中，添加 CodePush 依赖：

     dependencies {...implementation project(':react-native-code-push')...
     }
     

   • 在 android/app/src/main/java/.../MainApplication.java 文件中，添加 CodePush 配置：

     import com.microsoft.codepush.react.CodePush;@Override
     protected String getJSBundleFile() {return CodePush.getJSBundleFile();
     }@Override
     protected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG),...);
     }
     

   • 在 android/app/src/main/res/values/strings.xml 文件中，添加 CodePush deployment key：

     <string name="reactNativeCodePush_androidDeploymentKey">YOUR_ANDROID_DEPLOYMENT_KEY</string>
     

2. iOS 配置:

   • 在 Xcode 中，打开项目，添加 CodePush 依赖：

     • 打开 AppDelegate.m 文件，添加 CodePush 配置：

       #import <CodePush/CodePush.h>- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
       {return [CodePush bundleURL];
       }
       

     • 在 Info.plist 文件中，添加 CodePush deployment key：

       <key>CodePushDeploymentKey</key>
       <string>YOUR_IOS_DEPLOYMENT_KEY</string>
       

3.2.6 发布更新

1. 构建发布版本:

   npm run build:android
   npm run build:ios
   

2. 发布更新包:

   code-push release-react <appName> <platform> -d <deploymentName> --des "更新描述"
   

   • <appName>: CodePush 应用名称。
   • <platform>: 平台名称，android 或 ios。
   • <deploymentName>: 部署环境，Staging 或 Production。

   示例:

   code-push release-react MyApp-Android android -d Production --des "修复bug，优化性能"
   code-push release-react MyApp-iOS ios -d Production --des "修复bug，优化性能"
   

3. 查看更新历史:

   code-push deployment history <appName> <deploymentName>
   

   示例:

   code-push deployment history MyApp-Android Production
   code-push deployment history MyApp-iOS Production
   

3.2.7 强制更新

可以通过设置 mandatory 参数，强制用户更新应用。

示例:

code-push release-react MyApp-Android android -d Production --des "强制更新版本" --mandatory true

3.2.8 检查更新

在应用代码中，可以通过 CodePush API 检查更新并应用更新。

示例:

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import codePush from 'react-native-code-push';const MyApp = () => {const onCheckUpdate = () => {codePush.sync({updateDialog: {appendReleaseDescription: true,descriptionPrefix: '\n\n更新内容:\n',},mandatoryInstallMode: codePush.InstallMode.IMMEDIATE,});};return (<View style={styles.container}><Text style={styles.text}>欢迎使用 MyApp</Text><Button title="检查更新" onPress={onCheckUpdate} /></View>);
};

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师