ReactNative热更新的实现(0.39.2)
来源:互联网 发布:时时彩娱乐平台源码 编辑:程序博客网 时间:2024/05/16 03:00
全量热更新实现方式:
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:通过调用原生代码封装的方法来实现
注:
在IOS 中 引入 react-native-zip 编译工程时报错:
需要在Build Phases – Link Binary With Libraries 添加 libc.tbd 、 libz.1.2.8.tbd
- ReactNative热更新的实现(0.39.2)
- ReactNative热更新(0.39.2)
- reactnative 热更新记录
- ReactNative基于CodePush实现热更新集成详解
- ReactNative基于CodePush实现热更新集成详解
- ReactNative中文网推出的代码热更新服务
- ReactNative(热更新)介绍和搭建开发环境(MAC)
- 使用CodePush热更新ReactNative JS代码
- IOS、Android进阶之ReactNative热更新
- ReactNative系列之十八codepush热更新
- ReactNative集成CodePush实现热部署(iOS和Android)
- android 热更新的实现
- ReactNative使用code-open热更新使用详解(Android为例)
- Quick-Cocos2d-x的热更新机制实现(终极版2)
- erlang热更新的实现与原理
- 腾讯Bugly热更新的集成实现
- CodePush 热更新ReactNative之CodePush CLI操作
- CodePush 热更新ReactNative之React Native Client SDK
- javac不是内部或外部命令
- 334. Increasing Triplet Subsequence**
- 掌握 Ajax,第 4 部分: 利用 DOM 进行 Web 响应
- 记一次企业级爬虫系统升级改造(五):基于JieBaNet+Lucene.Net实现全文搜索
- make for arm
- ReactNative热更新的实现(0.39.2)
- js或jquery如何获取父级、子级、兄弟元素
- 1042-Can't get hostname for your address , navicat无法连接mysql
- 根据不同环境读取不同配置文件
- 算法之路一USACO: YOUR RIDE IS HERE
- 序列化和反序列化
- LeetCode 15. 3Sum
- HDOJ 6012 Lotus and Horticulture
- C++ STL : for_each