ReactNative热更新（0.39.2）

全量热更新实现方式：

RN在打包的时候，会将我所写的js文件打包成一个叫index.android.bundle(ios的是index.ios.jsbundle)的文件，所有的js代码(包括rn源代码、第三方库、业务逻辑的代码)都在这一个文件里，启动App时会第一时间加载bundle文件，所以脚本热更新要做的事情就是替换掉这个bundle文件。安装包中的bundle文件是在asset目录下的，而asset目录我们是没有写入权限的，所以我们不能修改安装包中的bundle文件。好在RN中提供了修改读取bundle路径的方法。以android为例，在MainApplication类中的

privatefinal ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

…..



...

}

IOS：在AppDelegate.m 修改读取 jsbundle逻辑



RN图片资源的加载：

RN图片加载的逻辑是如果有离线脚本，那么就从该脚本所在目录里寻找图片资源，否则就从asset中读取图片资源，所谓离线脚本就是我们重服务器下载下来的新版bundle文件，如果在我们存放新版jsbundle文件的目录下没有图片资源，那么我们更新jsbundle后会发现所有的图片都看不见了。
所以我们在使用bundle命令生成bundle文件的时候也将图片资源输出出来了，在打包bundle文件的时候我们可以将所有图片资源也一并打包进zip，客户端下载zip并解压缩后，客户端可写目录下也就有了所有的图片资源，这样就即实现了脚本的热更新又实现了图片的热更新。

如果每次更新jsbundle都时候我们都要将所有都图片资源都打入zip包未免有点太任性。

生成bundle命令：react-native bundle --platform android  --dev false --entry-file index.android.js \   --bundle-output ./android/app/src/main/assets/index.android.bundle \   --assets-dest
./android/app/src/main/res/

从解压工具看android APK的目录结构



解决办法：

在更新JSbundle之前我们将asset文件下的本地已有的图片资源拷贝到我们存放新bundle文件的目录下。那么每次我们放入zip包的图片资源只需是新增的图片和需改变的图片。在实现脚本增量热更新的时候我们可以把asset中的index.android.bundle也拷贝过来，这样通过服务器下载两个版本的之间的差异补丁和本地bundle融合得到新版jsbundle，不用每次都下载整个jsbundle文件。文件比较生成补丁使用 google的diff-match-patch；

拷贝asset 下的文件 通过调用原生代码封装的方法来实现

下载zip包的流程：下载 –解压 –删除

下载使用：react-native-file-transfer

 解压：react-native-zip

transfer 和zip 依赖
cordova

删除：react-native-fs

通过 reactnative link 命令 导入对应的依赖；例：react-native link react-native-fs

fs不仅有删除的zip包的方法,还有获取目录等很多好用的API;

解压到的目录可以 通过fs获取 RNFS.ExternalDirectoryPath

/sdcard/android/data/com.app名／files

或者其他的有写入权限的目录，要和前面在MainApplication类中的写入的bundle路径要一致。

立即加载新的jsbundle：通过调用原生代码封装的方法来实现

注：

        在IOS 中 引入 react-native-zip 编译工程时报错：
        需要在Build Phases – Link Binary With Libraries 添加 libc.tbd 、 libz.1.2.8.tbd

主要根据以下两篇文章提供的思路来实现Android和IOS热更新和增量热更新。

http://www.jianshu.com/p/2cb3eb9604ca

http://www.cnblogs.com/rayshen/p/5737293.html