【React Native】热更新

Android应用打包

Android要求所有应用都有一个数字签名才允许安装在用户手机上，需要生成一个签名的APK包。

打包步骤：

1. 生成离线Bundle资源文件。
2. 生成签名秘钥。
3. 利用签名秘钥生成release的APK文件。
4. 发布到应用市场提供用户下载安装。

PUSHY热更新

热更新一般用于Android平台为主，因为Apple禁止了热更新行为。

• 热更新原理
  React Native的热更新更像是原生App的版本更新。
  React Native的而加载启动流程可总结为：React Native将一系列资源打包成JS Bundle文件，系统加载js bundle文件来解析并渲染页面，具体细节：

  1.通过Restful服务获取服务端Bundle文件的版本。
  2.将本地缓存的版本信息和服务器的版本信息进行比较，判断是否需要更新
  3.如果需要更新，则从服务器下载最新的bundle文件并实现更新即可。如果没有更新，则加载assets目录下的index.android.bundle文件。
  

• 热更新的配置文件

安装命令
npm install -g react-native-update-cli rnpm
npm install --save react-native-update @4.x（@的具体版本如下图）
react-native link react-native-update

如果react-native的版本低于0.29，react-native link react-native-update替换为rnpm link。

CodePush热更新

1、安装 CodePush CLI
安装CodePush指令，直接在终端上输入如下命令即可，注意：这个CodePush指令只需要全局安装一次即可，如果第一次安装成功了，那后面就不在需要安装

$ npm install -g code-push-cli

2、注册 CodePush账号

code-push register

输入命令后出现如下网页，选择github登录，在cmd中输入登录之后得到的秘钥，登录成功。

CodePush注册登录相关命令：
code-push login 登陆
code-push loout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm 删除某个 access-key

CodePush管理App的相关命令：
code-push app list //查看添加的App
code-push app add 在账号里面添加一个新的app
code-push app remove 或者 rm 在账号里移除一个app
code-push app rename 重命名一个存在app
code-push app list 或则 ls 列出账号下面的所有app
code-push app transfer 把app的所有权转移到另外一个账号

3、在CodePush服务器注册App

//添加Android平台应用命令
code-push app add iOSRNHybridForAndroid Android react-native

输入命令后，成功就会返回对应的production 和 Staging 两个key，production代表生产版的热更新部署，Staging代表开发版的热更新部署。
在android中复制在Application的getPackages的CodePush中。

React-Native连接codePush

列出账号下的所有项目: code-push app list
查询部署环境的key：code-push deployment ls appName -k
//appName 为自己app list的名字

//终端进入你的项目根目录然后运行
npm install --save react-native-code-push
//输入命令将会自动帮我们在anroid文件中添加好设置
rnpm link react-native-code-push
//在终端运行此命令之后，终端会提示让你输入deployment key，这是你只需将你的deployment Staging key输入进去即可，如果不输入则直接单击enter跳过即可。

//在 android/app/build.gradle文件里面添如下代码:
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
//然后在/android/settings.gradle中添加如下代码:

include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

添加配置。当APP启动时我们需要让app向CodePush咨询JS bundle的所在位置，这样CodePush就可以控制版本。更新 MainApplication.java文件：

public class MainApplication extends Application implements ReactApplication {
	  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
	    @Override
	    protected boolean getUseDeveloperSupport() {
	      return BuildConfig.DEBUG;
	    }
	    @Override
	    protected String getJSBundleFile() {
	      return CodePush.getJSBundleFile();
	    }
	    @Override
	    protected List<ReactPackage> getPackages() {
	      // 3. Instantiate an instance of the CodePush runtime and add it to the list of
	      // existing packages, specifying the right deployment key. If you don't already
	      // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key.
	      return Arrays.<ReactPackage>asList(
	        new MainReactPackage(),
	        new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
	      );
	    }
	  };
	  @Override
	  public ReactNativeHost getReactNativeHost() {
	      return mReactNativeHost;
	  }
}

关于deployment-key的设置
在build.gradle中的设置方法如下:

//打开android/app/build.gradle文件,找到android { buildTypes {} }然后添加如下代码即可:

android {
    ...
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
            resValue "string", "CodePushDeploymentKey", ""
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://facebook.github.io/react-native/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            resValue "string", "CodePushDeploymentKey", "key"
        }
         releaseStaging {
            //这里的key为Staging的key
            resValue "string", "CodePushDeploymentKey", "key"
            matchingFallbacks = ['release']
        }
    }
    ...
}

在android/app/build.gradle设置好deployment-key之后呢,我们就可以这样使用了:

  public ArrayList<ReactPackage> getPackages() {
    return new ArrayList<>(Arrays.<ReactPackage>asList(
		new CodePush(getResources().getString(R.string.CodePushDeploymentKey), getApplicationContext(), BuildConfig.DEBUG),
		));
  }

修改versionName。
在 android/app/build.gradle中有个 android.defaultConfig.versionName属性，我们需要把 应用版本改成 1.0.0（默认是1.0，但是codepush需要三位数）

android {
    defaultConfig {
        applicationId "applicationId"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 5
        versionName "1.2.7"
        multiDexEnabled true
        manifestPlaceholders = [
                JPUSH_APPKEY: "APPKey", //在此替换你的APPKey
                APP_CHANNEL: "developer-default"    //应用渠道号
        ]
    }
 }

至此Code Push for Android的SDK已经集成完成。

使用CodePush进行热更新

设置更新策略
在使用CodePush更新你的应用之前需要，先配置一下更新控制策略，即：

1.什么时候检查更新？（在APP启动的时候？在设置页面添加一个检查更新按钮？）
什么时候可以更新，如何将更新呈现给终端用户？
最简单的方式是在根component中进行上述策略控制。

在 js中加载 CodePush模块：
import codePush from 'react-native-code-push’
2.在 componentDidMount中调用 sync方法，后台请求更新codePush.sync()
如果可以进行更新，CodePush会在后台静默地将更新下载到本地，等待APP下一次启动的时候应用更新，以确保用户看到的是最新版本。
如果更新是强制性的，更新文件下载好之后会立即进行更新。
如果你期望更及时的获得更新，可以在每次APP从后台进入前台的时候去主动的检查更新：
在应用的根component的componentDidMount中添加如下代码：

AppState.addEventListener("change", (newState) => {
    newState === "active" && codePush.sync();
});

发布更新

CodePush支持两种发布更新的方式，一种是通过code-push release-react简化方式，另外一种是通过code-push release的复杂方式

1.通过code-push release-react

code-push release-react MyApp-Android android --t 1.0.0 --dev false --d Production --des "1.优化操作流程" --m true

其中参数–t为二进制(.ipa与apk)安装包的的版本；–dev为是否启用开发者模式(默认为false)；–d是要发布更新的环境分Production与Staging(默认为Staging)；–des为更新说明；–m 是强制更新。