react-native实践记录（05）

react-native
Android, react-native实践记录

###0.前言

开发环境：windows10 + vscode + react-native 0.57 + Android模拟器

本文主要记录在Android中 react-native的 热更新和增量更新的实践

  • 热更新：动态的修改JSBundle文件的引用
  • 增量更新：通过diff-match-patch生成差分包(pat文件)，在APP端通过原来的bundle文件+pat文件生成新版的bundle文件。

注意：本文只是针对于Android方面的记录。

###1.热更新的实现
通过 实践记录(04)得到的结论，修改ReactNativeHost对象的getJSBundle()方法的返回值，就可以实现react-native代码的动态更新。

具体的步骤如下：

  1. 版本校验
  2. 下载服务端新版bundle文件及资源（zip）
  3. 替换本地jsBundle文件
  4. 重新创建ReactContext

具体涉及的耗时操作：

  • 文件下载
  • 文件解压
  • 创建ReactContext

此处主要注意 ReactContext 的创建，在更新完毕后重新创建ReactContext对象是异步的，如果未创建完毕，react-native界面将是白屏。

###2.增量更新的实现

  1. [原Bundle文件version_1,新Bundle文件version_2] –> [diff-match-patch(对比)]–> [pat文件]
  2. [原Bundle文件version_1,pat文件] –> [diff-match-patch(补丁修正)]–> [新Bundle文件version_2]

主要核心是通过diff-match-patch库实现

diff-match-patch库：GitHub地址

注意点：

  1. 生成pat文件与读取的环境和编码

    在生成pat包时，需要注意生成的编码环境和系统环境。最好在使用环境中生成pat包。例如：在Android系统下使用，那么在Android环境中生成pat包，以免原Bundle文件和pat包合并成错误的Bundle文件

  2. Bundle文件生成后的刷新问题

    外部Bundle文件的加载需要重新实例化ReactContext对象，即调用如下代码：

    if( NowyApp.getInstance().getReactNativeHost().hasInstance()){
     NowyApp.getInstance().getReactNativeHost().clear();//清除原来的实例
 }

NowyApp.getInstance().getReactNativeHost().getReactInstanceManager()//初始化
               .createReactContextInBackground();

需要注意的是，createReactContextInBackground()为异步操作，只有实例化完成才能看到最新的bundle展现的react-native界面

###3.附录

本文项目相关代码：

END

–Nowy

–2018.11.27

分享到