ReactNative热更新的实现（0.39.2）

最新推荐文章于 2019-09-19 08:46:38 发布

14梧桐雨

最新推荐文章于 2019-09-19 08:46:38 发布

阅读量348

点赞数

全量热更新实现方式：

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

privatefinal ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

…..

}

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/

解决办法：

在更新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：通过调用原生代码封装的方法来实现