随着 React Native 的不断发展完善，越来越多的公司选择使用 React Native 替代 iOS/Android 进行部分业务线的开发，也有不少使用 Hybrid 技术的公司转向了 React Native 。虽然React Native在目前来说仍有不少的坑，不过对于以应用开发为主的App来说完全可以胜任。

概述

在iOS应用开发中，由于Apple严格的审核标准和低效率，iOS应用的发版速度极慢，这对于大多数团队来说是不能接受的，所以热更新对于iOS应用来说就显得尤其重要。而就在前不久，苹果严禁WaxPatch、JSPatch等热修复框架，不过庆幸的是采用Js热更新的React Native似乎并可没有收到多大影响。

热更新作为React Native的优势之一，相信很多人在选择使用React Native来开发应用，也是因为React Native具有的热更新特性。在热更新方案中，比较出名的有微软的 CodePush，React Native中文网的pushy，在调研的初期，我们参考了携程的jsbundle 拆分和加载优化方案，但这个方案需要改变 React Native 的打包代码及 Runtime 代码，实施难度上非常大，并且对于应用的性能提升并不明显，暂时不考虑这种方案。

热更新原理

React Native的热更新并不像原生应用更新那么复杂，React Native的热更新更像原生App的版本更新。用一个流程图表示的话如下：
这里写图片描述

热更新实现方案

当下选择使用 React Native 的项目大都是基于原有项目的基础上进行接入，即所谓的混合开发，而这些混合的代码中，为了不增加带代码的难度（理解和维护难度），也只是将部分非核心的代码RN化了。

使用React Native进行热更新，就涉及到了jsbundle的拆分和加载原理。

使用pushy进行热更新

本部分来自官方文档

安装命令

在你的项目根目录下运行以下命令：

npm install -g react-native-update-cli rnpm
npm install --save react-native-update@具体版本请看下面的表格
react-native link react-native-update

对应版本表格

React Native版本	react-native-update版本
0.26以下	1.0.x
0.27 - 0.28	2.x
0.29 - 0.33	3.x
0.34 - 当前版本	4.x

注：如果RN版本低于0.29，请使用rnpm link代替react-native link命令。
例如，我当前我的React native是0.44.3版本，则命令如下：

npm install --save react-native-update@4.x

如果上面的react-native link已成功(iOS工程和安卓工程均能看到依赖)，可以跳过此步骤。成功的效果如下：
这里写图片描述
如果，没有请看下面介绍。

收到Link

iOS

在XCode中的Project Navigator里,右键点击Libraries Add Files to [你的工程名]
进入node_modules react-native-update ios并选中RCTHotUpdate.xcodeproj`
在XCode中的project navigator里,选中你的工程,在 Build Phases Link Binary WithLibraries 中添加 libRCTHotUpdate.a
继续在Build Settings里搜索Header Search Path，添加$(SRCROOT)/../node_modules/react-native-update/ios
Run your project (Cmd+R)

android

在android/settings.gradle中添加如下代码:

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

在android/app/build.gradle的 dependencies 部分增加如下代码:

 compile project(':react-native-update')

检查你的RN版本,如果是0.29及以上, 打开android/app/src/main/java/[...]/MainApplication.java,否则打开android/app/src/main/java/[...]/MainActivity.java。改动的地方如下：
在文件开头增加 import cn.reactnative.modules.update.UpdatePackage;在getPackages() 方法中增加 new UpdatePackage()。

接下来需要对Bundle进行配置

配置Bundle URL

iOS

在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd。在你的AppDelegate.m文件中增加如下代码：

#import "RCTHotUpdate.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#if DEBUG
  // 原来的jsCodeLocation
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
  jsCodeLocation=[RCTHotUpdate bundleURL];
#endif
  // ... 其它代码
}

Android

0.29及以后版本：在你的MainApplication中增加如下代码：

import cn.reactnative.modules.update.UpdateContext;
public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected String getJSBundleFile() {
        return UpdateContext.getBundleUrl(MainApplication.this);
    }
    // ... 其它代码
  }
}

0.28及以前版本：在你的MainActivity中增加如下代码：

import cn.reactnative.modules.update.UpdateContext;

public class MainActivity extends ReactActivity {

    @Override
    protected String getJSBundleFile() {
        return UpdateContext.getBundleUrl(this);
    }
    // ... 其它代码
}

iOS的ATS例外配置

从iOS9开始，苹果要求以白名单的形式在Info.plist中列出外部的非https接口，以督促开发者部署https协议。在我们的服务部署https协议之前，请在Info.plist中添加如下例外。具体步骤为：右键点击Info.plist，选择open as - source code。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>reactnative.cn</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
   </dict>
</dict>

登录与创建应用

首先请在http://update.reactnative.cn注册帐号，然后在你的项目根目录下运行以下命令：

$ pushy login
email: <输入你的注册邮箱>
password: <输入你的密码>

这会在项目文件夹下创建一个.update文件，注意不要把这个文件上传到Git等CVS系统上。你可以在.gitignore末尾增加一行.update来忽略这个文件。
登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建：

$ pushy createApp --platform ios
App Name: <输入应用名字>
$ pushy createApp --platform android
App Name: <输入应用名字>

如果你已经在网页端或者其它地方创建过应用，也可以直接选择应用：

$ pushy selectApp --platform ios
1) 鱼多多(ios)
3) 招财旺(ios)

Total 2 ios apps
Enter appId: <输入应用前面的编号>

选择或者创建过应用后，你将可以在文件夹下看到update.json文件，其内容类似如下形式：

{
    "ios": {
        "appId": 1,
        "appKey": "<一串随机字符串>"
    },
    "android": {
        "appId": 2,
        "appKey": "<一串随机字符串>"
    }
}

你可以安全的把update.json上传到Git等CVS系统上，与你的团队共享这个文件，它不包含任何敏感信息。当然，他们在使用任何功能之前，都必须首先输入pushy login进行登录。至此服务器端应用的创建/选择就已经成功了。接下来我们只需要在客户端添加相应的功能代码即可。

获取appKey

检查更新时必须提供你的appKey，这个值保存在update.json中，并且根据平台不同而不同。你可以用如下的代码获取：

import {
  Platform,
} from 'react-native';

import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];

注：如果你不使用pushy命令行，你也可以从网页端查看到两个应用appKey，并根据平台的不同来选择。

检查更新、下载更新

使用异步函数checkUpdate检查当前版本是否需要更新：

checkUpdate(appKey)
    .then(info => {
    })

返回的info有三种情况：

{expired: true}：该应用包(原生部分)已过期，需要前往应用市场下载新的版本。
{upToDate: true}：当前已经更新到最新，无需进行更新。
{update: true}：当前有新版本可以更新。info的name、description字段可以用于提示用户，而metaInfo字段则可以根据你的需求自定义其它属性(如是否静默更新、是否强制更新等等)。另外还有几个字段，包含了完整更新包或补丁包的下载地址，react-native-update会首先尝试耗费流量更少的更新方式。将info对象传递给downloadUpdate作为参数即可。

切换版本

downloadUpdate的返回值是一个hash字符串，它是当前版本的唯一标识。你可以使用switchVersion函数立即切换版本(此时应用会立即重新加载)，或者选择调用 switchVersionLater，让应用在下一次启动的时候再加载新的版本。

首次启动、回滚

在每次更新完毕后的首次启动时，isFirstTime常量会为true。你必须在应用退出前合适的任何时机，调用markSuccess，否则应用下一次启动的时候将会进行回滚操作。这一机制称作“反触发”，这样当你应用启动初期即遭遇问题的时候，也能在下一次启动时恢复运作。

你可以通过isFirstTime来获知这是当前版本的首次启动，也可以通过isRolledBack来获知应用刚刚经历了一次回滚操作。并且在此处给与用户提示信息。

附完整代码：

import React, {
  Component,
} from 'react';

import {
  AppRegistry,
  StyleSheet,
  Platform,
  Text,
  View,
  Alert,
  TouchableOpacity,
  Linking,
} from 'react-native';

import {
  isFirstTime,
  isRolledBack,
  packageVersion,
  currentVersion,
  checkUpdate,
  downloadUpdate,
  switchVersion,
  switchVersionLater,
  markSuccess,
} from 'react-native-update';

import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];

class MyProject extends Component {
  componentWillMount(){
    if (isFirstTime) {
      Alert.alert('提示', '这是当前版本第一次启动,是否要模拟启动失败?失败将回滚到上一版本', [
        {text: '是', onPress: ()=>{throw new Error('模拟启动失败,请重启应用')}},
        {text: '否', onPress: ()=>{markSuccess()}},
      ]);
    } else if (isRolledBack) {
      Alert.alert('提示', '刚刚更新失败了,版本被回滚.');
    }
  }
  doUpdate = info => {
    downloadUpdate(info).then(hash => {
      Alert.alert('提示', '下载完毕,是否重启应用?', [
        {text: '是', onPress: ()=>{switchVersion(hash);}},
        {text: '否',},
        {text: '下次启动时', onPress: ()=>{switchVersionLater(hash);}},
      ]);
    }).catch(err => { 
      Alert.alert('提示', '更新失败.');
    });
  };
  checkUpdate = () => {
    checkUpdate(appKey).then(info => {
      if (info.expired) {
        Alert.alert('提示', '您的应用版本已更新,请前往应用商店下载新的版本', [
          {text: '确定', onPress: ()=>{info.downloadUrl && Linking.openURL(info.downloadUrl)}},
        ]);
      } else if (info.upToDate) {
        Alert.alert('提示', '您的应用版本已是最新.');
      } else {
        Alert.alert('提示', '检查到新的版本'+info.name+',是否下载?\n'+ info.description, [
          {text: '是', onPress: ()=>{this.doUpdate(info)}},
          {text: '否',},
        ]);
      }
    }).catch(err => { 
      Alert.alert('提示', '更新失败.');
    });
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          欢迎使用热更新服务
        </Text>
        <Text style={styles.instructions}>
          这是版本一 {'\n'}
          当前包版本号: {packageVersion}{'\n'}
          当前版本Hash: {currentVersion||'(空)'}{'\n'}
        </Text>
        <TouchableOpacity onPress={this.checkUpdate}>
          <Text style={styles.instructions}>
            点击这里检查更新
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('MyProject', () => MyProject);

到此，你的应用已经具备了检测更新的功能，接下来我们需要将应用发布出去。
注意，从update上传发布版本到发布版本正式上线期间，不要修改任何脚本和资源，这会影响update 获取本地代码，从而导致版本不能更新。如果在发布之前修改了脚本或资源，请在网页端删除之前上传的版本并重新上传。

发布iOS应用

按照正常的发布流程打包.ipa文件(Xcode中运行设备选真机或Generic iOS Device，然后菜单中选择Product-Archive)，然后运行如下命令：

pushy uploadIpa <your-package.ipa>

随后，你就可以将你的ipa文件发布到AppStore。

发布安卓应用

Android打包的流程和原生打包apk的流程一样，然后在android文件夹下运行./gradlew assembleRelease，你就可以在android/app/build/outputs/apk/app-release.apk中找到你的应用包。
然后使用如下命令，即可上传apk以供后续版本比对之用。

pushy uploadApk android/app/build/outputs/apk/app-release.apk

发布热更新版本

你可以尝试修改一行代码(譬如将版本一修改为版本二)，然后生成新的热更新版本。

pushy bundle --platform <ios|android>
Bundling with React Native version:  0.22.2
<各种进度输出>
Bundled saved to: build/output/android.1459850548545.ppk
Would you like to publish it?(Y/N)

如果想要立即发布，此时输入Y。当然，你也可以在将来使用pushy publish --platform 来发布版本。

Uploading [========================================================] 100% 0.0s
Enter version name: <输入版本名字，如1.0.0-rc>
Enter description: <输入版本描述>
Enter meta info: {"ok":1}
Ok.
Would you like to bind packages to this version?(Y/N)

此时版本已经提交到update服务，但用户暂时看不到此更新，你需要先将特定的包版本绑定到此热更新版本上。

此时输入Y立即绑定，你也可以在将来使用pushy update --platform 来使得对应包版本的用户更新。除此以外，你还可以在网页端操作，简单的将对应的包版本拖到此版本下即可。

Offset 0
1) FvXnROJ1 1.0.1 (no package)
2) FiWYm9lB 1.0 [1.0]
Enter versionId or page Up/page Down/Begin(U/D/B) <输入序号,U/D翻页,B回到开始，序号就是上面列表中)前面的数字>

1) 1.0(normal) - 3 FiWYm9lB (未命名)

Total 1 packages.
Enter packageId: <输入包版本序号，序号就是上面列表中)前面的数字>

到此，客户端就可以使用热更新了，不用升级相关版本。

混合app热更新

jsbundle 拆分

对 React Native 的代码打包编译后会生成一个 bundle 文件，这里要说明一下， jsbundle 的拆分是基于生成的 bundle 文件可以看成两部分构成（如下图）：一是 React Native 包含的的基础类库，一是开发的业务代码。
这里写图片描述
首先需要做的就是生成 common.bundle ，新建一个 blank.android.js 文件，在文件中仅引入 react 及 react native。

import React from 'react';
import {} from 'react-native';

通过打包命令编译成 common.bundle :

react-native bundle --entry-file blank.android.js --bundle-output ~/Desktop/common.bundle --platform android --dev false

打包完整的 jsbundle ，这将会包含所有的基础类库及业务代码。
最后根据 diff 算法将两个文件进行 diff 拆分，由此会生成一个 index.diff 的二进制文件。如有多个业务代码，相应的生成多个 diff 文件即可。
这里写图片描述

bundle 文件的拷贝及合成

在完成拆分以后，我们需要将 common.bundle 及拆分的 *.diff 文件进行 zip 压缩，放入 assets 目录下，为了方便版本管理，我们将其文件名中写入版本号 jsbundle_<版本号>.zip ，例如： jsbundle_1.zip ，每次改 zip 文件包跟随发版时更新，并自动升级版本号。
接下来我们要做的就是将内置于 assets 目录下的 jsbundle_*.zip 拷贝至内部存储，这里推荐使用应用内部存储。

在拷贝过程中根据历史记录的版本号，进行判断是否需要执行拷贝，拷贝完成后将 common.bundle 及 .diff 文件进行 patch 合并，合并后的文件即为一个完整的 bundle 文件，文件名规定为 .diff.bundle ，例如： index.diff.bundle ，在加载时根据模块名进行加载即可。

diff 文件的更新

说到热更新，到这里直接更新diff文件即可，并合成新的完整 bundle 文件。接下来就是将diff 文件的生成及上传，这里我们通过一个shell脚本来完成自动上传功能。

if [ $platform == "android" ]; then
    react-native bundle \
        --entry-file $commonFile.js \
        --bundle-output $androidModuleDir/common.bundle \
        --platform android \
        --dev false

    echo "common.bundle packed!!!"

    react-native bundle \
        --entry-file $module.js \
        --bundle-output $androidModuleDir/$module.android.bundle \
        --platform android \
        --dev false

    echo "$module.android.bundle packed!!!"

    # 对 jbdiff 打成的 jar 执行文件
    chmod +x dmp.jar 

    echo "diff start =========>>>"
    java -jar ./dmp.jar $androidModuleDir/common.bundle \
        $androidModuleDir/$module.android.bundle $androidModuleDir/$module.diff
    # 进行二次 zip 压缩
    zip -j $androidModuleDir/$module.diff.zip $androidModuleDir/$module.diff
elfi ...

改造原生代码

React Native 的 bundle 文件加载做了更改，我们就不能直接使用 sdk 提供的 ReactActivity 了，对此我们需要对容器 Activity 进行改造。改造的部分如下：

public class MyReactNativeHost extends ReactNativeHost{
    ...
    protected MyReactNativeHost(Application application, String moduleName) {
        super(application);
        mApplication = application;
        mModuleName = moduleName;
    }
    ...
    @Override
    protected ReactInstanceManager createReactInstanceManager() {
        if(getUseDeveloperSupport()){ //为了保留 debug 的能力
            return super.createReactInstanceManager();
        }
        String path = JSBundleManager.getJSBundleDirPath(mApplication)
                .concat(mModuleName).concat(".diff.bundle");
        ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
                .setApplication(mApplication)
                .setJSBundleLoader(JSBundleLoader.createFileLoader(path))
                .setUseDeveloperSupport(false)
                .setInitialLifecycleState(LifecycleState.BEFORE_RESUME);
        ...
        return builder.build();
    }
    ...
}

注：由于采用加载文件系统下的 bundle 文件的形式，在测试过程中发现通过此形式加载的 bundle 文件，图片加载时不能读取到 res 目录下的资源文件。要解决这个问题，主要有两个方案：1、将 js 源码中的逻辑进行修改，都从 res 中读取资源；2、将 React Native 使用到的资源打包到本地，跟随 jsbundle_*.zip 发布。
由于苹果对热更新的态度，我们暂且不谈ios的热更新，有兴趣的可以自行研究Jspath等热更新框架。

React Native热更新及混合开发

概述

热更新原理

热更新实现方案

使用pushy进行热更新

安装命令

收到Link

配置Bundle URL

iOS

Android

iOS的ATS例外配置

登录与创建应用

获取appKey

检查更新、下载更新

切换版本

首次启动、回滚

发布iOS应用

发布安卓应用

发布热更新版本

混合app热更新

jsbundle 拆分

bundle 文件的拷贝及合成

diff 文件的更新

改造原生代码

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

React Native热更新及混合开发

概述

热更新原理

热更新实现方案

使用pushy进行热更新

安装命令

收到Link

配置Bundle URL

iOS

Android

iOS的ATS例外配置

登录与创建应用

获取appKey

检查更新、下载更新

切换版本

首次启动、回滚

发布iOS应用

发布安卓应用

发布热更新版本

混合app热更新

jsbundle 拆分

bundle 文件的拷贝及合成

diff 文件的更新

改造原生代码

热门文章

最新文章

相关课程

相关电子书