React Native 实现热部署、差异化增量热更新

喜欢ヅ旅行 2021-09-14 07:32 1122阅读 0赞

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

# 一、原理分析 #

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

![SouthEast][]

上面流程图中展示了如何实现更新的步骤，可以总结为进入App根据版本检查是否需要更新：

**（1）更新**：

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

**（2）不更新**：

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

**1>存在**：

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

**2>不存在**：

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

Ok，根据上面的流程，我们来看下代码实现过程。

# 二、功能实现 #

**（1）检查是否需要更新**

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">    /\*\* 
2.      \* 检查版本号 
3.      \*/  
4.     **private** **void** checkVersion() \{  
5.   
6.         **if**(**true**) \{  
7.             // 有最新版本  
8.             Toast.makeText(**this**, "开始下载", Toast.LENGTH\_SHORT).show();  
9.             downLoadBundle();  
10.         \}  
11.     \}

实现步骤即请求服务器中的版本号，然后与本地版本号进行对比，此处我为了代码清晰易懂，直接执行下载更新的流程。

**（2）Android为我们提供了下载工具类：DownLoadManager，我们使用它来执行下载**

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">    /\*\* 
2.      \* 下载最新Bundle 
3.      \*/  
4.     **private** **void** downLoadBundle() \{  
5.   
6.         // 1.检查是否存在pat压缩包,存在则删除  
7.         zipfile = **new** File(FileConstant.JS\_PATCH\_LOCAL\_PATH);  
8.         **if**(zipfile != **null** && zipfile.exists()) \{  
9.             zipfile.delete();  
10.         \}  
11.         // 2.下载  
12.         DownloadManager downloadManager = (DownloadManager) getSystemService(Context.DOWNLOAD\_SERVICE);  
13.         DownloadManager.Request request = **new** DownloadManager  
14.                 .Request(Uri.parse(FileConstant.JS\_BUNDLE\_REMOTE\_URL));  
15.         request.setNotificationVisibility(DownloadManager.Request.VISIBILITY\_HIDDEN);  
16.         request.setAllowedNetworkTypes(DownloadManager.Request.NETWORK\_MOBILE| DownloadManager.Request.NETWORK\_WIFI);  
17.         request.setDestinationUri(Uri.parse("file://"\+ FileConstant.JS\_PATCH\_LOCAL\_PATH));  
18.         mDownLoadId = downloadManager.enqueue(request);  
19.     \}

首先去判断是否存在有下载的更新压缩包，如果有，则先删除旧的，然后下载最新压缩包。

**（3）下载完成后，DownLoadManager会发出一个DownloadManager.ACTION\_DOWNLOAD\_COMPLETE的广播，在收到广播后，对比下载任务ID   **

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">    /\*\* 
2.      \* 下载完成后收到广播 
3.      \*/  
4.     **public** **class** CompleteReceiver **extends** BroadcastReceiver \{  
5.   
6.         @Override  
7.         **public** **void** onReceive(Context context, Intent intent) \{  
8.             **long** completeId = intent.getLongExtra(DownloadManager.EXTRA\_DOWNLOAD\_ID,-1);  
9.             **if**(completeId == mDownLoadId) \{  
10.                 // 1.解压  
11.                 RefreshUpdateUtils.decompression();  
12.                 zipfile.delete();  
13.                 // 2.将下载好的patches文件与assets目录下的原index.android.bundle合并，得到新的  
14.                 // bundle文件  
15. //                mergePatAndAsset();  
16.                 startActivity(**new** Intent(MainActivity.**this**,MyReactActivity.**class**));  
17.             \}  
18.         \}  
19.     \}

因为我们下载的是Zip压缩文件（Zip压缩文件体积下，有效控制了由于更新文件大以及图片资源占用给用户带来消耗流量的问题），所以我们需要先解压

**（4）解压Zip**

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">    /\*\* 
2.      \* 解压 
3.      \*/  
4.     **public** **static** **void** decompression() \{  
5.           
6.         **try** \{  
7.               
8.             ZipInputStream inZip = **new** ZipInputStream(**new** FileInputStream(FileConstant.JS\_PATCH\_LOCAL\_PATH));  
9.             ZipEntry zipEntry;  
10.             String szName;  
11.             **try** \{  
12.                 **while**((zipEntry = inZip.getNextEntry()) != **null**) \{  
13.   
14.                     szName = zipEntry.getName();  
15.                     **if**(zipEntry.isDirectory()) \{  
16.                           
17.                         szName = szName.substring(0,szName.length()-1);  
18.                         File folder = **new** File(FileConstant.JS\_PATCH\_LOCAL\_FOLDER + File.separator + szName);  
19.                         folder.mkdirs();  
20.                           
21.                     \}**else**\{  
22.   
23.                         File file1 = **new** File(FileConstant.JS\_PATCH\_LOCAL\_FOLDER + File.separator + szName);  
24.                         **boolean** s = file1.createNewFile();  
25.                         FileOutputStream fos = **new** FileOutputStream(file1);  
26.                         **int** len;  
27.                         **byte**\[\] buffer = **new** **byte**\[1024\];  
28.                           
29.                         **while**((len = inZip.read(buffer)) != -1) \{  
30.                             fos.write(buffer, 0 , len);  
31.                             fos.flush();  
32.                         \}  
33.                           
34.                         fos.close();  
35.                     \}  
36.                 \}  
37.             \} **catch** (IOException e) \{  
38.                 e.printStackTrace();  
39.             \}  
40.             inZip.close();  
41.         \} **catch** (FileNotFoundException e) \{  
42.             e.printStackTrace();  
43.         \} **catch** (IOException e) \{  
44.             e.printStackTrace();  
45.         \}  
46.     \}

**（5）解压完成后，加载最新Bundle和图片资源**

如何控制RN加载Bundle的方式呢？没错，0.26版本之后的RN系统在ReactApplication下的ReactNativeHost为我们提供了getJsBundleFile方法，在该方法中默认返回null，即加载assets下的bundle文件。我们可以根据条件来加载不同目录下的bundle文件即可

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">/\*\* 
2.  \* Created by Song on 2017/2/13. 
3.  \*/  
4. **public** **class** MainApplication **extends** Application **implements** ReactApplication \{  
5.   
6.     **private** **static** MainApplication instance;  
7.     **private** **static** **final** CommPackage mCommPackage = **new** CommPackage();  
8.   
9.     @Override  
10.     **public** **void** onCreate() \{  
11.         **super**.onCreate();  
12.         instance = **this**;  
13.         SoLoader.init(**this**,**false**);  
14.     \}  
15.   
16.     **private** **final** ReactNativeHost mReactNativeHost = **new** ReactNativeHost(**this**) \{  
17.   
18.         @Nullable  
19.         @Override  
20.         **protected** String getJSBundleFile() \{  
21.             File file = **new** File (FileConstant.JS\_BUNDLE\_LOCAL\_PATH);  
22.             **if**(file != **null** && file.exists()) \{  
23.                 **return** FileConstant.JS\_BUNDLE\_LOCAL\_PATH;  
24.             \} **else** \{  
25.                 **return** **super**.getJSBundleFile();  
26.             \}  
27.         \}  
28.   
29.         @Override  
30.         **public** **boolean** getUseDeveloperSupport() \{  
31.             **return** BuildConfig.DEBUG;  
32.         \}  
33.   
34.         @Override  
35.         **protected** List<ReactPackage> getPackages() \{  
36.             **return** Arrays.<ReactPackage>asList(  
37.                     **new** MainReactPackage(),  
38.                     mCommPackage  
39.             );  
40.         \}  
41.     \};  
42.   
43.     @Override  
44.     **public** ReactNativeHost getReactNativeHost() \{  
45.         **return** mReactNativeHost;  
46.     \}  
47. \}

在当我们下载好最新更新文件后，跳转到RN界面，即会执行getJSBundleFile方法来执行加载Bundle文件的方式。在实际应用当中，我们可以在Splash页面去执行检查更新下载，然后在跳转到RN界面时，最新文件就会呈现出来。

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

**\[html\]**  [view plain][]   [copy][view plain]

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

**（1）--entry   入口js文件，android系统就是index.android.js，ios系统就是index.ios.js**

**（2）--bundle-output   生成的bundle文件路径**

**（3）--platform   平台**

**（4）--assets-dest  图片资源的输出目录**

**（5）--dev   是否为开发版本，打正式版的安装包时我们将其赋值为false**

执行命令之前，首先要在根目录下创建好bundle文件夹，bundle文件和图片资源将会输出到已创建好的bundle文件夹下。

解压后的最新更新文件：

![20170216101155443][]

# 三、差异化更新 #

到此，我们便完成了代码的热更新工作。大家可能会说，如果bundle太大的情况下怎么办呢？没错，这个问题同样在博客开始也提到了。打包成zip也是为了减小更新文件体积，减少用户流量消耗，同样，我们也可以生成用生成补丁包的方式来进一步减小更新包zip的体积。

初始项目发布时，生成并保留一份index.android.bundle文件。  
有版本更新时，生成新的index.android.bundle文件，使用google-diff-match-patch对比两个文件，并生成差异补丁文件。app下载补丁文件，再使用google-diff-match-patch和assets目录下的初始版本合并，生成新的index.android.bundle文件。

**1.添加google-diff-match-patch库**

google-diff-match-patch库包含了多种编程语言的库文件，我们使用其中的Java版本，所以我将其提取出来，方便大家下载使用：

[google-diff-match-patch-java][]

下载后将其添加到项目目录即可。

**2.生成补丁包**

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">// 获取新旧Bundle文件  
2. String o = RefreshUpdateUtils.getStringFromPat("C:/Users/lenovo/Desktop/old.bundle");     
3. String n = RefreshUpdateUtils.getStringFromPat("C:/Users/lenovo/Desktop/new.bundle");     
4.   
5. // 对比  
6. diff\_match\_patch dmp = **new** diff\_match\_patch();        
7. LinkedList<Diff> diffs = dmp.diff\_main(o, n);         
8.   
9. // 生成差异补丁包    
10. LinkedList<Patch> patches = dmp.patch\_make(diffs);    
11.   
12. // 解析补丁包       
13. String patchesStr = dmp.patch\_toText(patches);        
14.   
15. **try** \{         
16.     // 将补丁文件写入到某个位置  
17.     Files.write(Paths.get("C:/Users/lenovo/Desktop/patches.pat"), patchesStr.getBytes());  
18. \} **catch** (IOException e) \{         
19.     // TODO Auto-generated catch block            
20.     e.printStackTrace();      
21. \}

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;"> **public** **static** String getStringFromPat(String patPath) \{   
2.   
3.     FileReader reader = **null**;      
4.     String result = "";     
5.           
6.     **try** \{              
7.         reader = **new** FileReader(patPath);              
8.         **int** ch = reader.read();              
9.         StringBuilder sb = **new** StringBuilder();              
10.         **while** (ch != -1) \{                  
11.         sb.append((**char**)ch);                  
12.         ch  = reader.read();                     
13.         reader.close();              
14.         result = sb.toString();          
15.     \} **catch** (FileNotFoundException e) \{             
16.         e.printStackTrace();         
17.     \} **catch** (IOException e) \{          
18.         e.printStackTrace();        
19.     \}         
20.      **return** result;     
21. \}

**3.下载完成，解压后执行mergePatAndAsset方法将Assets目录下的index.android.bundle和pat文件合并**

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">    /\*\* 
2.      \* 下载完成后收到广播 
3.      \*/  
4.     **public** **class** CompleteReceiver **extends** BroadcastReceiver \{  
5.   
6.         @Override  
7.         **public** **void** onReceive(Context context, Intent intent) \{  
8.             **long** completeId = intent.getLongExtra(DownloadManager.EXTRA\_DOWNLOAD\_ID,-1);  
9.             **if**(completeId == mDownLoadId) \{  
10.                 // 1.解压  
11.                 RefreshUpdateUtils.decompression();  
12.                 zipfile.delete();  
13.                 // 2.将下载好的patches文件与assets目录下的原index.android.bundle合并，得到新的  
14.                 // bundle文件  
15.                 mergePatAndAsset();  
16.                 startActivity(**new** Intent(MainActivity.**this**,MyReactActivity.**class**));  
17.             \}  
18.         \}  
19.     \}

**4.合并**

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">    /\*\* 
2.      \* 合并patches文件 
3.      \*/  
4.     **private** **void** mergePatAndAsset() \{  
5.   
6.         // 1.获取Assets目录下的bunlde  
7.         String assetsBundle = RefreshUpdateUtils.getJsBundleFromAssets(getApplicationContext());  
8.         // 2.获取.pat文件字符串  
9.         String patcheStr = RefreshUpdateUtils.getStringFromPat(FileConstant.JS\_PATCH\_LOCAL\_FILE);  
10.         // 3.初始化 dmp  
11.         diff\_match\_patch dmp = **new** diff\_match\_patch();  
12.         // 4.转换pat  
13.         LinkedList<diff\_match\_patch.Patch> pathes = (LinkedList<diff\_match\_patch.Patch>) dmp.patch\_fromText(patcheStr);  
14.         // 5.与assets目录下的bundle合并，生成新的bundle  
15.         Object\[\] bundleArray = dmp.patch\_apply(pathes,assetsBundle);  
16.         // 6.保存新的bundle  
17.         **try** \{  
18.             Writer writer = **new** FileWriter(FileConstant.JS\_BUNDLE\_LOCAL\_PATH);  
19.             String newBundle = (String) bundleArray\[0\];  
20.             writer.write(newBundle);  
21.             writer.close();  
22.             // 7.删除.pat文件  
23.             File patFile = **new** File(FileConstant.JS\_PATCH\_LOCAL\_FILE);  
24.             patFile.delete();  
25.         \} **catch** (IOException e) \{  
26.             e.printStackTrace();  
27.         \}  
28.     \}

从上述代码中我们看到，合并分为如下过程：

**（1）获取Assets目录下的bundle文件，转换为字符串**

**   （2）解析.pat文件将其转换为字符串**

**   （3）调用patch\_fromText获取patches补丁包**

**   （4）调用patch\_apply方法将第四步中生成patches补丁包与第一步中获取的bundle合并生成新的bundle**

**   （5）保存bundle**

**5.读取pat文件的方法：**

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">   /\*\* 
2.      \* 将.pat文件转换为String 
3.      \* @param patPath 下载的.pat文件所在目录 
4.      \* @return 
5.      \*/  
6.     **public** **static** String getStringFromPat(String patPath) \{  
7.   
8.         FileReader reader = **null**;  
9.         String result = "";  
10.         **try** \{  
11.             reader = **new** FileReader(patPath);  
12.             **int** ch = reader.read();  
13.             StringBuilder sb = **new** StringBuilder();  
14.             **while** (ch != -1) \{  
15.                 sb.append((**char**)ch);  
16.                 ch  = reader.read();  
17.             \}  
18.             reader.close();  
19.             result = sb.toString();  
20.         \} **catch** (FileNotFoundException e) \{  
21.             e.printStackTrace();  
22.         \} **catch** (IOException e) \{  
23.             e.printStackTrace();  
24.         \}  
25.         **return** result;  
26.     \}

**6.读取Assets目录下的bundle文件：**

**\[java\]**  [view plain][]   [copy][view plain]

1. <span style="color:\#333333;">    /\*\* 
2.      \* 获取Assets目录下的bundle文件 
3.      \* @return 
4.      \*/  
5.     **public** **static** String getJsBundleFromAssets(Context context) \{  
6.   
7.         String result = "";  
8.         **try** \{  
9.   
10.             InputStream is = context.getAssets().open(FileConstant.JS\_BUNDLE\_LOCAL\_FILE);  
11.             **int** size = is.available();  
12.             **byte**\[\] buffer = **new** **byte**\[size\];  
13.             is.read(buffer);  
14.             is.close();  
15.             result = **new** String(buffer,"UTF-8");  
16.   
17.         \} **catch** (IOException e) \{  
18.             e.printStackTrace();  
19.         \}  
20.         **return** result;  
21.     \}

以上步骤执行完成后，我们就获取到了新的bundle文件，继而加载新的bundle文件，实现React Native热更新。上述差异包更新方式只能更新不含图片引用的bundle代码文件，如果需要增量更新图片，需要修改React Native源码

# 四、修改React Native图片加载源码 #

渲染图片的方法在：node\_modules / react-native / Libraries / Image /**AssetSourceResolver**.js 下：

**\[java\]**  [view plain][]   [copy][view plain]

1.  defaultAsset(): ResolvedAssetSource \{  
2.    **if** (**this**.isLoadedFromServer()) \{  
3.      **return** **this**.assetServerURL();  
4.    \}  
5.    
6.    **if** (Platform.OS === 'android') \{  
7.      **return** **this**.isLoadedFromFileSystem() ?  
8.        **this**.drawableFolderInBundle() :  
9.        **this**.resourceIdentifierWithoutScale();  
10.   \} **else** \{  
11.     **return** **this**.scaledAssetPathInBundle();  
12.   \}  
13. \}

defaultAsset方法中根据平台的不同分别执行不同的图片加载逻辑。重点我们来看android platform：

**drawableFolderInBundle**方法为在存在离线Bundle文件时，从Bundle文件所在目录加载图片。**resourceIdentifierWithoutScale**方法从Asset资源目录下加载。由此，我们需要修改**isLoadedFromFileSystem**方法中的逻辑。

**（1）在AssetSourceResolver.js中增加增量图片全局名称变量**

**\[java\]**  [view plain][]   [copy][view plain]

1.  /\*\* 
2.   \* Copyright (c) 2015-present, Facebook, Inc. 
3.   \* All rights reserved. 
4.   \* 
5.   \* This source code is licensed under the BSD-style license found in the 
6.   \* LICENSE file in the root directory of this source tree. An additional grant 
7.   \* of patent rights can be found in the PATENTS file in the same directory. 
8.   \* 
9.   \* @providesModule AssetSourceResolver 
10.  \* @flow 
11.  \*/  
12. 'use strict';  
13.   
14. export type ResolvedAssetSource = \{  
15.   \_\_packager\_asset: **boolean**,  
16.   width: number,  
17.   height: number,  
18.   uri: string,  
19.   scale: number,  
20. \};  
21.   
22. **import** type \{ PackagerAsset \} from 'AssetRegistry';  
23. // 全局缓存  
24. var patchImgNames = '';  
25. **const** PixelRatio = require('PixelRatio');**const** Platform = require('Platform');**const** assetPathUtils = require('../../local-cli/bundle/assetPathUtils');**const** invariant = require('fbjs/lib/invariant');/\*\* \* Returns a path like 'assets/AwesomeModule/icon@2x.png' \*/function getScaledAssetPath(asset): string \{ var scale = AssetSourceResolver.pickScale(asset.scales, PixelRatio.get()); var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x'; var assetDir = assetPathUtils.getBasePath(asset); **return** assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;\}  
26.  剩余代码略....

（2）修改isLoadedFromFileSystem方法

**\[java\]**  [view plain][]   [copy][view plain]

1.  isLoadedFromFileSystem(): **boolean** \{  
2.    var imgFolder = getAssetPathInDrawableFolder(**this**.asset);  
3.    var imgName = imgFolder.substr(imgFolder.indexOf("/") + 1);  
4.    var isPatchImg = patchImgNames.indexOf("|"\+imgName+"|") > -1;  
5.    **return** !!**this**.bundlePath && isPatchImg;  
6.  \}

patchImgNames是增量更新的图片名称字符串全局缓存，其中包含所有更新和修改的图片名称，并且以 “|”隔开。当系统加载图片时，如果在缓存中存在该图片名，证明是我们增量更新或修改的图片，所以需要系统从Bundle文件所在目录下加载。否则直接从原有Asset资源加载。

**（3）每当有图片增量更新，修改patchImgName，例如images\_ic\_1.png和images\_ic\_2.png为增量更新或修改的图片**

**\[java\]**  [view plain][]   [copy][view plain]

1.  var patchImgNames = ' |images\_ic\_1.png|images\_ic\_2.png |';

**注**：生成bundle目录时，图片资源都会放在统一目录下（drawable-mdpi），如果引用图片包含其它路径，例如require(“./img/test1.png”)，图片在img目录下，则图片加载时会自动将img目录转换为图片名称：”img\_test1.png”，即图片所在文件夹名称会作为图片名的前缀。此时图片名配置文件中的名称也需要声明为”img\_test1.png”，例如：" | img\_test1.png | img\_test2.png | "

**（4）重新打包**

**\[java\]**  [view plain][]   [copy][view plain]

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

**（5）生成.pat差异补丁包，并压缩为zip更新包**

**![20170512115358471][]**

更新包没有太大区别，依然是增量更新的图片和pat。

小提示：因为RN会从drawable-mdpi下加载图片，所以我们只需要将drawable-mdpi打包即可，其余的   drawable-xx文件夹可以不放进到zip。

**（6）既然是增量更新，就会分为第一次更新前与后的情况。所以需要声明一个标识来表示当前是否为第一次下发更新包**

【第一次更新前】：

1> SD卡下不存在更新包，pat补丁包需要与Asset下的index.android.bundle进行合并，生成新的bundle文件。

2> 增量图片直接下发到SD卡

【第一次更新后，即第一次更新后的更新操作】：

1> SD卡下存在更新包，需要将新的pat补丁包与SD卡下的上次生成的index.android.bundle进行合并，生成新的bundle文件。

2> 增量图片需要添加到SD卡bundle所在文件夹下的drawable-mdpi目录。

3> 本次下发的更新包在与之前的bundle进行合并以及将图片添加到之前drawable-mdpi后，需要删除。

核心代码如下：

**\[java\]**  [view plain][]   [copy][view plain]

1.  // 1.下载前检查SD卡是否存在更新包文件夹,FIRST\_UPDATE来标识是否为第一次下发更新包  
2.  bundleFile = **new** File(FileConstant.LOCAL\_FOLDER);  
3.  **if**(bundleFile != **null** && bundleFile.exists()) \{  
4.      ACache.get(getApplicationContext()).put(AppConstant.FIRST\_UPDATE,**false**);  
5.  \} **else** \{  
6.      // 第一次更新  
7.      ACache.get(getApplicationContext()).put(AppConstant.FIRST\_UPDATE,**true**);  
8.  \}

**\[java\]**  [view plain][]   [copy][view plain]

1.  /\*\* 
2.   \* 下载完成后，处理ZIP压缩包 
3.   \*/  
4.  **private** **void** handleZIP() \{  
5.    
6.      // 开启单独线程，解压，合并。  
7.      **new** Thread(**new** Runnable() \{  
8.          @Override  
9.          **public** **void** run() \{  
10.   
11.             **boolean** result = (Boolean) ACache.get(getApplicationContext()).getAsObject(AppConstant.FIRST\_UPDATE);  
12.             **if** (result) \{  
13.                 // 解压到根目录  
14.                 FileUtils.decompression(FileConstant.JS\_PATCH\_LOCAL\_FOLDER);  
15.                 // 合并  
16.                 mergePatAndAsset();  
17.             \} **else** \{  
18.                 // 解压到future目录  
19.                 FileUtils.decompression(FileConstant.FUTURE\_JS\_PATCH\_LOCAL\_FOLDER);  
20.                 // 合并  
21.                 mergePatAndBundle();  
22.             \}  
23.             // 删除ZIP压缩包  
24.             FileUtils.deleteFile(FileConstant.JS\_PATCH\_LOCAL\_PATH);  
25.         \}  
26.     \}).start();  
27. \}

**\[java\]**  [view plain][]   [copy][view plain]

1.  /\*\* 
2.   \* 与Asset资源目录下的bundle进行合并 
3.   \*/  
4.  **private** **void** mergePatAndAsset() \{  
5.    
6.      // 1.解析Asset目录下的bundle文件  
7.      String assetsBundle = FileUtils.getJsBundleFromAssets(getApplicationContext());  
8.      // 2.解析bundle当前目录下.pat文件字符串  
9.      String patcheStr = FileUtils.getStringFromPat(FileConstant.JS\_PATCH\_LOCAL\_FILE);  
10.     // 3.合并  
11.     merge(patcheStr,assetsBundle);  
12.     // 4.删除pat  
13.    FileUtils.deleteFile(FileConstant.JS\_PATCH\_LOCAL\_FILE);  
14. \}

**\[java\]**  [view plain][]   [copy][view plain]

1.  /\*\* 
2.   \* 与SD卡下的bundle进行合并 
3.   \*/  
4.  **private** **void** mergePatAndBundle() \{  
5.    
6.      // 1.解析sd卡目录下的bunlde  
7.      String assetsBundle = FileUtils.getJsBundleFromSDCard(FileConstant.JS\_BUNDLE\_LOCAL\_PATH);  
8.      // 2.解析最新下发的.pat文件字符串  
9.      String patcheStr = FileUtils.getStringFromPat(FileConstant.FUTURE\_PAT\_PATH);  
10.     // 3.合并  
11.     merge(patcheStr,assetsBundle);  
12.     // 4.添加图片  
13.     FileUtils.copyPatchImgs(FileConstant.FUTURE\_DRAWABLE\_PATH,FileConstant.DRAWABLE\_PATH);  
14.     // 5.删除本次下发的更新文件  
15.     FileUtils.traversalFile(FileConstant.FUTURE\_JS\_PATCH\_LOCAL\_FOLDER);  
16. \}

**\[java\]**  [view plain][]   [copy][view plain]

1. /\*\* 
2.  \* 合并,生成新的bundle文件 
3.  \*/  
4. **private** **void** merge(String patcheStr, String bundle) \{  
5.   
6.     // 3.初始化 dmp  
7.     diff\_match\_patch dmp = **new** diff\_match\_patch();  
8.     // 4.转换pat  
9.     LinkedList<diff\_match\_patch.Patch> pathes = (LinkedList<diff\_match\_patch.Patch>) dmp.patch\_fromText(patcheStr);  
10.     // 5.pat与bundle合并，生成新的bundle  
11.     Object\[\] bundleArray = dmp.patch\_apply(pathes,bundle);  
12.     // 6.保存新的bundle文件  
13.     **try** \{  
14.         Writer writer = **new** FileWriter(FileConstant.JS\_BUNDLE\_LOCAL\_PATH);  
15.         String newBundle = (String) bundleArray\[0\];  
16.         writer.write(newBundle);  
17.         writer.close();  
18.     \} **catch** (IOException e) \{  
19.         e.printStackTrace();  
20.     \}  
21. \}

FileUtils工具类函数：

**\[java\]**  [view plain][]   [copy][view plain]

1.  /\*\* 
2.   \* 将图片复制到bundle所在文件夹下的drawable-mdpi 
3.   \* @param srcFilePath 
4.   \* @param destFilePath 
5.   \*/  
6.  **public** **static** **void** copyPatchImgs(String srcFilePath,String destFilePath) \{  
7.    
8.      File root = **new** File(srcFilePath);  
9.      File\[\] files;  
10.     **if**(root.exists() && root.listFiles() != **null**) \{  
11.         files = root.listFiles();  
12.         **for** (File file : files) \{  
13.             File oldFile=**new** File(srcFilePath+file.getName());  
14.             File newFile=**new** File(destFilePath+file.getName());  
15.             DataInputStream dis= **null**;  
16.             DataOutputStream dos=**null**;  
17.             **try** \{  
18.                 dos=**new** DataOutputStream(**new** FileOutputStream(newFile));  
19.                 dis = **new** DataInputStream(**new** FileInputStream(oldFile));  
20.             \} **catch** (FileNotFoundException e) \{  
21.                 e.printStackTrace();  
22.             \}  
23.   
24.             **int** temp;  
25.             **try** \{  
26.                 **while**((temp=dis.read())!=-1)\{  
27.                     dos.write(temp);  
28.                 \}  
29.                 dis.close();  
30.                 dos.close();  
31.             \} **catch** (IOException e) \{  
32.                 e.printStackTrace();  
33.             \}  
34.         \}  
35.     \}  
36. \}

**\[java\]**  [view plain][]   [copy][view plain]

1.  /\*\* 
2.   \* 遍历删除文件夹下所有文件 
3.   \* @param filePath 
4.   \*/  
5.  **public** **static** **void** traversalFile(String filePath) \{  
6.      File file = **new** File(filePath);  
7.      **if** (file.exists()) \{  
8.          File\[\] files = file.listFiles();  
9.          **for** (File f : files) \{  
10.             **if**(f.isDirectory()) \{  
11.                 traversalFile(f.getAbsolutePath());  
12.             \} **else** \{  
13.                 f.delete();  
14.             \}  
15.         \}  
16.         file.delete();  
17.     \}  
18. \}

**\[java\]**  [view plain][]   [copy][view plain]

1.  /\*\* 
2.   \* 删除指定File 
3.   \* @param filePath 
4.   \*/  
5.  **public** **static** **void** deleteFile(String filePath) \{  
6.      File patFile = **new** File(filePath);  
7.      **if**(patFile.exists()) \{  
8.          patFile.delete();  
9.      \}  
10. \}

当客户端下载解析后，图片的增量更新就搞定了，这样我们的更新包就小了很多。 缺点也很明显，每次更新RN版本的时候，都需要修改RN的源码，不过这点小麻烦还是可以避免的。  
  
其实还有另一种办法解决增量热更新。思路很简单，即不加载asset目录下的bundle文件，最开始就把bundle放到SD卡下。让RN加载Bundle的路径固定为SD卡路径。这样每次都可以直接更新SD卡的更新包即可。不过缺点也是很明显的，如果RN作为App的首显示界面，这就很尴尬了。这里只是提及，具体流程不再赘述。

# 六、iOS热更新 #

[@**清风飏**][Link 1] 私信说实现了在iOS下的热更新，并且也是以压缩包形式下发。唯一区别是没有实现增量更新，大家有需要的，可以去了解一下：[React-Native开发iOS篇-热更新的代码实现][Link 1]

# 七、效果图  
  #

![20170216215331249][]

以上就是使用React Native关于热更新的内容，其实还有很多不足地方，例如对更新文件进行加密，防止被恶意修改等等一些内容还需要不断完善。

[SouthEast]: /images/20210802/6f32f41dc01442b08e2cbd0b98846c4b.png
[view plain]: http://blog.csdn.net/u013718120/article/details/55096393#
[20170216101155443]: /images/20210802/e02c504ed3794b089460b38781c5a663.png
[google-diff-match-patch-java]: http://download.csdn.net/detail/u013718120/9833398
[20170512115358471]: /images/20210802/3a334515c497412ea84f27ec494ef93f.png
[Link 1]: http://blog.csdn.net/lcg910978041/article/details/77326765
[20170216215331249]: /images/20210802/e53de343908d4df69dae25369d3370a9.png