ReactNative使用code-open热更新使用详解（Android为例）

CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。这里我们只谈RN的热更，CodePush不开源，只作为一个中央仓库云服务器，接下来我们来详细讲解如何利用code-push进行热更。
主要流程如下：

安装 CodePush CLI。
创建一个CodePush 账号
在CodePush服务器注册app
在app上添加CodePush SDK，配置升级相关代码。
更新代码后，发布一个应用更新到服务器
app收到升级推送

接下来详细来讲解每一步的操作：
一、安装CodePush CLI
管理 CodePush 账号需要通过 NodeJS-based CLI.
只需要在控制台输入 npm install -g code-push-cli，就可以安装了。
安装完毕后，输入 code-push -v查看版本代表成功。
目前我的版本是 1.12.6-beta

二、创建CodePush账号
在控制台输入 code-push register 后，将会打开一个网页进行注册
CodePush账号支持 github和 Microsofe，选其中一个就可以了。
我选择的是 github，授权完毕后，网页将会显示一个token，复制它到控制台的中就成功了。

成功登陆后，你的session文件将会写在 /Users/guanMac/.code-push.config。

同样，若已经创建过账号，希望在另一台机器上再次登录，在控制台输入code-push login即可打开一个网页，接下来与注册操作一致，获得accesskey。

相关命令

code-push login 登陆
code-push loout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm 删除某个 access-key

三、在CodePush服务器上注册app
为了让codePush服务器知道你的app，我们需要向它注册app： code-push app add “appName”，就可以了。

CODE-PUSH APP相关命令

add 在账号里面添加一个新的app
remove 或者 rm 在账号里移除一个app
rename 重命名一个存在app
list 或则 ls 列出账号下面的所有app
transfer 把app的所有权转移到另外一个账号

四、在app中添加SDK，配置相关代码
第一步、在应用中安装react-native插件，npm install –save react-native-code-push
第二步、npm i -g rnpm 安装rnpm（codepush还提供了Manual，不过我没用，也可以试试）
第三步、rnpm link react-native-code-push 安装
第四步、在 android/app/build.gradle中有个 android.defaultConfig.versionName属性，我们需要把应用版本改成 1.0.0（默认是1.0，但是codepush需要三位数）。

    android{        defaultConfig{            versionName "1.0.0"        }    }

第五步、android插件下载

1.找到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')

2.找到android/app/build.gradle文件，新增:react-native-code-push工程依赖

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

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

第六步、通过 code-push deployment ls MyReact1 -k命令获取deploymentKey
第七步、在应用中部署更新控制策略，修改index.android.js文件：
import codePush from ‘react-native-code-push’引入，在componentDidMount中调用 sync方法，后台请求更新 codePush.sync()，这里使用了默认的布局：
codePush.sync({
updateDialog: {
appendReleaseDescription: true,
descriptionPrefix:’\n\n更新内容：\n’,
title:’更新’,
mandatoryUpdateMessage:”,
mandatoryContinueButtonLabel:’更新’,
},
mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
deploymentKey: “”,//第六步获取的deploymentKey
});
第八步、发布更新
发布更新有两种方式，第一种方式是code-push release-react，推荐这种方式，也比较简单
code-push release-react appName android –t “版本号” –dev “是否调试” –d “发布到哪里，默认staging” –des “说明” –m “是否强制更新”
（关于code-push release-react更多可选的参数，可以在终端输入code-push release-react进行查看）
第二种方式是code-push release
这种方式的区别是需要我们将js与图片资源进行打包成bundle再发布

在工程目录里面新增 bundles文件：mkdir bundles
运行命令打包 react-native bundle –platform 平台 –entry-file 启动文件 –bundle-output 打包js输出文件 –assets-dest 资源输出目录 –dev 是否调试。

我们运行看一下：

D:\work\myWork\daigoapp\RN-daigo>code-push release-react MyReact1 android –t 1.
0.0 –dev false –des “测试一下更新3” –m true
Running “react-native bundle” command:
node node_modules\react-native\local-cli\cli.js bundle –assets-dest C:\Users\ji
angxf\AppData\Local\Temp\CodePush –bundle-output C:\Users\jiangxf\AppData\Local
\Temp\CodePush\index.android.bundle –dev false –entry-file index.android.js –
platform android

从上面可以看出，其实第一种方式最终还是会以第二种的方式进行发布的。

在这里需要注意的有三点：
1、appName
2、版本号要对应，发布的版本号其实是app的版本号，要跟你生成app的版本号一致，比如我们前面第四步的android.defaultConfig.versionName=1.0.0，那这里发布的版本号也是这个
3、deploymentKey，通过code-push deployment ls MyReact1 -k 命令来获取
这样，就能进行热更新了。
如有错误，烦请指出，谢谢。

个人简介：
前端小司机，倒腾前端一切，砸尽一切非前端的饭碗。
有兴趣请加前端交流群

更多相关文章

随机推荐