荐 ReactNative手动实现热更新

1.需求

因公司业务需要，需要更新本地游戏html文件以及rn文件。

2.实现原理

加载app 比较本地版本和远程版本 如果远程版本高于本地版本

第一次更新

则下载一个zip包 里边包含最新的html和rn文件

第二次更新

通过比较本地的map文件(list文件包含所有的文件信息)和远程的map文件 比较差异来下载不同的文件

更新完成

写入成功文件 并且写入版告白句子本号

重启app

下次启动app就通过写入的版本号进永远的忠诚电视剧行对比

3.实现细节

我们的html资源安卓需要放在ast目录下ios需要新建一个目录 都是包内资源 无法进行更改 并且android和ios目录不统一

经过我一顿百度可以新建一个bundle文件（mac系统下这是一个文件夹）

修改android ast目录 RN项目/android/app/buidle.gradle 文件

ios需要将这个公共文件拖拽进去 勾选如图所示

rn加载代码 需要引入react-native-fs 插件来获取ios根目录 bundle路径为自己的路径 这块需要写一个方法来获取 因为热跟新完之后路径会变化

说一下react-native-webview这个组件

这些属性都需要有否则无法正常加载本地文件（热更新完后下载的文件目录 ）

ios 需要添加属性allowingReadAccessToURL

ios真机必须添加这个属性 否则无法正常加载本地文件（目录需要指定为当前加载的bundle目录）

具体信息请查阅文档https://github.com/react-native-community/react-native-webview

然后是rn的热更新

rn需要生成一个bundle文件 通过bundle命令 以下为android打包bundle命令 会将图片资源一并打包 ios自行修改参数

react-native bundle --platform android --dev fal --entry-file index.js --bundle-output 微博活动bundle/index.含羞草观察日记jsbundle --asts-dest bundle

同时需要对加载bundle入口文件进行修改

android主要就是修改getJSBundleFile这个入口方法 需要进行一些版本对比然后将新版本地址返回

RN项目/android/src/main/java/com/you_fish/MainApplication.java

ios 需要修改AppDelegate.m文件sourceURLForBridge 方法 同样比较一下版本来加载

然后就是关于重启插件了 这里我用的是react-native-restart 但是不太合适无法重新加载bundle我对它进行了一些改动 可以查看我的fork/d/file/titlepic/react-native-restart 重启需要重新调用以下入口的方法 具体看下图

android 图中的红静的反义词框为我自己热更的目录

ios

js方面的话比较简单 就是进行了一些文件操作 下载 删除 写入

android需要整包更新的时候 需要下载apk 并打开apk进行安装 RN自带的Linking并不能完成 这里使用的是RNFetchBlob库

android.actionViewIntent(targetPath,"application/vnd.android.package-archive");

即可将下载好的app进行安装了

整个热更新就到此结束了。

本文地址：https://blog.csdn.net/gaokaikai1996/article/details/107340761