React Native 热更新部署

上一篇和大家分享了如何在Android 现有App中集成React Native。今天这篇博客也是React Native中比较热门的内容 ---> 热更新部署。

Android原生App中我们实现热修复有很多种选择:Tinker、hotFix、Qzone的热更新等等。基本的思路都是大同小异的。React Native中的热更新有点像App的版本更新,也就是根据查询server端的版本和手机端目前App的版本进行对比,然后来执行是否更新的操作。根本原因在于React Native的加载启动机制:React Native会将一系列资源打包成js bundle文件,系统加载js bundle文件,解析并渲染。所以,React Native热更新的根本原理就是更换js bundle文件,并重新加载,新的内容就完美的展示出来了。微软为我们提供了CodePush来简化热更新的操作,但是由于速度等原因在国内并没有备受青睐。本篇内容就以自己服务器来更新的方式实现。

前面简单的说了些基本原理,接下来先上一张具体的更新流程图:


上面流程图中展示了如何实现更新的步骤,可以总结为如下几点:

进入App根据版本检查是否需要更新:

(1)更新:

下载最新JsBundle文件以及所需要的图片资源等,下载完成后解析最新JsBundle文件

(2)不更新:

判断本地是否还有缓存的JsBundle文件

1>存在:

本地存在JsBundle,即有过热更新操作。那么App直接加载在缓存目录下的JsBundle文件

2>不存在:

本地不存在JsBundle,即之前从未有过热更新操作。那么App只能使用初始化时打包在assets目录下的index.android.bundle文件

Ok,基本的流程大致就是以上步骤,下面我们来看下代码实现流程:

(1)

(2)

(3)



如何获取最新的bundle文件图片资源呢?我们在RN项目根目执行以下命令来得到bundle文件图片资源:

react-native bundle --entry-file index.android.js --bundle-output ./bundle/index.android.bundle --platform android --assets-dest ./bundle --dev false


--entry是入口js文件,android系统就是index.android.js,ios系统就是index.ios.js

--bundle-output就是生成的bundle文件路径

--platform是平台

--assets-dest是图片资源的输出目录

--dev表示是否是开发版本,打正式版的安装包时我们将其赋值为false

打包成功后,如何控制RN加载Bundle的方式呢?没错,RN系统在ReactActivity下为我们提供了getJsBundleFile方法,在该方法认返回null,即加载assets下的bundle文件。我们可以根据条件来加载不同目录下的bundle文件即可。

我们将下载好的bundle文件到getFilesDir().getAbsolutePath()目录下,再次启动App时便会读取该目录下的bundle文件了,以后再有新版本的bundle文件,依然是下载覆盖掉这个bundle文件,到此,我们便完成了代码的热更新工作。

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...