React Native 项目整合 CodePush 完全指南

作者 | 钱凯

杏仁移动开发工程师，前嵌入式工程师，关注大前端技术新潮流。

本文使用的环境：

• React@16.3.1

• React Native@0.55.4

• react-native-code-push@5.3.4

• Android SDK@23

• Android Build Tool@23.0.3

• Gradle@2.14.1

• Android Gradle Plugin@2.2.3

Why CodePush？

CodePush 是微软提供的一个热更新前后台方案，它对 React Native 项目有很好的支持。

目前针对 React Native 的 hot update 方案有许多，但是 CodePush 是最成熟稳定的方案，它最大的特点是提供了完整的后台工具。它主要的优点是：

• 微软出品，大厂保证

• 良好的多环境支持（Testing，Staging, Production）

• 灰度发布、自动回滚等等特性

• 良好的数据统计支持：下载、安装、出错一目了然

• 强大的 CLI 工具，一个终端搞定全部流程

由于 React Native 执行的是脚本 js 文件，对热更新有天然的亲和，有余力的团队可以尝试实现自己的框架，一个简单的实现思路是：

• 修改加载 jsBundle 的代码，转而从指定的本地存储位置去加载。如果没有，下载 bundle, 并且本次打开使用 app 包中的 bundle。

• 如果找到 jsBundle 文件，调用 api 比较版本号，如果不一致，则从指定服务器下载最新的 bundle 进行替换。

• 通过反射调用私有方法，在下载完成的回调中更新运行时资源，从而能立即看到更新的效果。

• 使用类似 google-diff-match-patch 的 diff 工具，生成差异化补丁，不必下载完整 bundle，从而大大减小补丁包体积。

网上有很多资料和源码，这里就不细述了。

后台配置

为了使用 Code Push 发布热更新，我们需要向微软服务注册我们的应用。这部分工作微软提供了强大的命令行工具：CodePush CLI。

安装 cli 工具

npm 全局安装：

npm install -g code-push-cli

关联账号

使用命令

code-push register

注册一个账号，可以直接使用 GitHub 账号授权，完成后将 token 复制回命令行中。

使用 whoami 查看登录状态:

code-push whoami

注册应用

登录成功后，我们注册一个app：

code-push app add 你的App名称 android react-native

注意一定要为 Android 和 iOS 分别注册，两者的更新包内容会有差异。

查询状态

每个 App 有不同的运行时环境，比如 Production,Staging等，我们也可以配置自己的环境。查看 App 的不同环境和部署状况：

code-push deployment ls 注册的app名称

目前我们还没有发布任何更新，所以表中的状态是空的。

到这里就完成了后端的基本配置。

App端配置

版本兼容

安装 Code Push 环境前首先要 check 版本的兼容性问题，不同的RN版本需要使用不同的 Code Push，原则上我们建议将 RN 和 CodePush 都升级到最新版本。