React-Native热更新部署/热更新CodePush集成详解

React-Native热更新参考文档
React Native热更新部署/热更新-CodePush最新集成总结(新)

---

CodePush简介
CodePush是微软提供的一套用于热更新ReactNative和Cordova的应用服务。
CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新 (JS, HTML, CSS and images)，应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性，也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候，不需要经过二进制打包，可以直接推送代码进行实时更新。
安装CodePush CLI
丨参数-g表示安装位置为全局，尽量不要安装在当前项目目录下

创建CodePush账号
在终端输入code-push register，会打开如下注册页面让你选择授权账号。（具体相关步骤参照此链接文档）
在CodePush服务器注册app
终端输入：$code-push app add RnApp完成注册并获取部署键值
Production 表示生产环境 唯一识别的部署键值： ijmEPDQ8dUx7bKA8FI-kzerBz2Ot4kJNWW_aG
Staging 表示开发环境 唯一识别的部署键值： E9afFCggw314-0Uz84ygf72p2lva4kJNWW_aG
建议：Android和IOS使用单独的项目部署获取两套 Deployment Key

我的code-push版本号为：1.12.9
安装 react-native-code-push插件
切换到RN工程根目录 终端输入命令：npm install react-native-code-push –save

执行完上一步命令后会在ReactNative根目录下的package.json文件中自动写入依赖配置

注意：切换到RN工程根目录 终端输入命令：$ rnpm link react-native-code-push 将会自动帮我们进行code-push插件在原生中的gradle配置，
但是不建议使用，我们可以手动的进行 CodePush 的 gradle 配置以达到同样的效果。
这是引入RN官网的文档：
安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

在原生项目中手动集成 CodePush
1. 在 android/app/build.gradle文件里面添如下代码：
1 apply from: “../../node_modules/react-native-code-push/android/codepush.gradle”

2. 在/android/settings.gradle中添加如下代码:
– 1 include ‘:react-native-code-push’
–2project(‘:react-native-code-push’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-code-push/android/app’)

3. 在 android/app/build.gradle文件里面添如下代码将CodePush添加项目编译:
——compile project(‘:react-native-code-push’)

4.运行 code-push deployment ls RnApp -k 命令获取 部署秘钥.

5. 在 MainApplication.java 中添加如下代码：
1 //注意需要将部署键值替换成自己的项目的唯一键值

2 new CodePush(“deployment-key-here”, MainApplication.this, BuildConfig.DEBUG)

6. 在index.Android.js 中调用更新服务
本人使用的是sublime编辑器

相应代码块

componentDidMount{
    codePushUpdate();
  }
  //远程服务检测更新
  codePushUpdate{
    codePush.sync({
      installMode: codePush.InstallMode.IMMEDIATE,
      updateDialog: true
     },
     (status) => {
      switch (status) {
        case codePush.SyncStatus.CHECKING_FOR_UPDATE:
            console.log('codePush.SyncStatus.CHECKING_FOR_UPDATE');
          break;
        case codePush.SyncStatus.AWAITING_USER_ACTION:
          console.log('codePush.SyncStatus.AWAITING_USER_ACTION');
          break;
        case codePush.SyncStatus.DOWNLOADING_PACKAGE:
          console.log('codePush.SyncStatus.DOWNLOADING_PACKAGE');
          break; 
        case codePush.SyncStatus.INSTALLING_UPDATE:
          console.log('codePush.SyncStatus.INSTALLING_UPDATE');
          break;
        case codePush.SyncStatus.UP_TO_DATE:
          console.log('codePush.SyncStatus.UP_TO_DATE');
          break;
        case codePush.SyncStatus.UPDATE_IGNORED:
          console.log('codePush.SyncStatus.UPDATE_IGNORED');
          break;
        case codePush.SyncStatus.UPDATE_INSTALLED:
          console.log('codePush.SyncStatus.UPDATE_INSTALLED');
          break;
        case codePush.SyncStatus.SYNC_IN_PROGRESS:
          console.log('codePush.SyncStatus.SYNC_IN_PROGRESS');
          break;
        case codePush.SyncStatus.UNKNOWN_ERROR:
          console.log('codePush.SyncStatus.UNKNOWN_ERROR');
          break;
      }
     },
     ({ receivedBytes, totalBytes, }) => {
      console.log('receivedBytes / totalBytes: ------------    ' + receivedBytes+'/'+totalBytes);
      }
    );
  }

8. 在RN更目录下新建两个文件夹
注意：将项目的VersionName修改为三位数！（例如：1.0.0）

9. CodePush命令行打JsBundle包（存于本地）
1 react-native bundle –platform android –entry-file index.android.js –bundle-output ./bundles/index.android.bundle –assets-dest ./bundles –dev false

注意：在js中引入import codePush from ‘react-native-code-push’

10. 执行如下命令部署到微软服务器
code-push release HelloWord ./bundles 1.0.1 –deploymentName Staging –description “RN热更新测试“ –mandatory true

注意：执行命令行时，ReactNative工程项目名称必须为小写，大写可能会不识别,如下图:

现在可以查看手机运行效果了，如下图：

现在，一个简单的code_push就算完成了.