React Native 實現熱部署、差異化增量熱更新

該隱的星球發表於2017-08-24
React Native熱部署
原文連結：http://blog.csdn.net/u013718120/article/details/55096393

本篇部落格由江清清技術專欄獨家釋出，轉載請註明出處。專案已開源到github，連結為：ReactNativeApp，歡迎大家fork，star


上一篇和大家分享瞭如何在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）檢查是否需要更新

[java] view plain copy
  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.     }</span>  

       實現步驟即請求伺服器中的版本號，然後與本地版本號進行對比，此處我為了程式碼清晰易懂，直接執行下載更新的流程。


（2）Android為我們提供了下載工具類：DownLoadManager，我們使用它來執行下載

[java] view plain copy
  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.     }</span>  

      首先去判斷是否存在有下載的更新壓縮包，如果有，則先刪除舊的，然後下載最新壓縮包。


（3）下載完成後，DownLoadManager會發出一個DownloadManager.ACTION_DOWNLOAD_COMPLETE的廣播，在收到廣播後，對比下載任務ID   

[java] view plain copy
  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.     }</span>  

     因為我們下載的是Zip壓縮檔案（Zip壓縮檔案體積下，有效控制了由於更新檔案大以及圖片資源佔用給使用者帶來消耗流量的問題），所以我們需要先解壓


（4）解壓Zip

[java] view plain copy
  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.     }</span>  


（5）解壓完成後，載入最新Bundle和圖片資源

        如何控制RN載入Bundle的方式呢？沒錯，0.26版本之後的RN系統在ReactApplication下的ReactNativeHost為我們提供了getJsBundleFile方法，在該方法中預設返回null，即載入assets下的bundle檔案。我們可以根據條件來載入不同目錄下的bundle檔案即可

[java] view plain copy
  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. }</span>  

    在當我們下載好最新更新檔案後，跳轉到RN介面，即會執行getJSBundleFile方法來執行載入Bundle檔案的方式。在實際應用當中，我們可以在Splash頁面去執行檢查更新下載，然後在跳轉到RN介面時，最新檔案就會呈現出來。

如何獲取最新的bundle檔案和圖片資源呢？我們在RN專案根目執行以下命令來得到bundle檔案和圖片資源:

[html] view plain copy
  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資料夾下。

解壓後的最新更新檔案：



三、差異化更新

到此，我們便完成了程式碼的熱更新工作。大家可能會說，如果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
  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. }</span>  
[java] view plain copy
  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. }</span>  

3.下載完成，解壓後執行mergePatAndAsset方法將Assets目錄下的index.android.bundle和pat檔案合併

[java] view plain copy
  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.     }</span>  

4.合併

[java] view plain copy
  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.     }</span>  

   從上述程式碼中我們看到，合併分為如下過程：


   （1）獲取Assets目錄下的bundle檔案，轉換為字串

   （2）解析.pat檔案將其轉換為字串

   （3）呼叫patch_fromText獲取patches補丁包

   （4）呼叫patch_apply方法將第四步中生成patches補丁包與第一步中獲取的bundle合併生成新的bundle

   （5）儲存bundle


5.讀取pat檔案的方法：

[java] view plain copy
  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.     }</span>  

6.讀取Assets目錄下的bundle檔案：

[java] view plain copy
  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.     }</span>  

以上步驟執行完成後，我們就獲取到了新的bundle檔案，繼而載入新的bundle檔案，實現React Native熱更新。上述差異包更新方式只能更新不含圖片引用的bundle程式碼檔案，如果需要增量更新圖片，需要修改React Native原始碼


四、修改React Native圖片載入原始碼


渲染圖片的方法在：node_modules / react-native / Libraries / Image /AssetSourceResolver.js 下：

[java] view plain copy
  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
  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
  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
  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
  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更新包

 

  更新包沒有太大區別，依然是增量更新的圖片和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
  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
  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
  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
  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
  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
  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
  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
  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熱更新


@清風颺 私信說實現了在iOS下的熱更新，並且也是以壓縮包形式下發。唯一區別是沒有實現增量更新，大家有需要的，可以去了解一下：React-Native開發iOS篇-熱更新的程式碼實現



七、效果圖


  

以上就是使用React Native關於熱更新的內容，其實還有很多不足地方，例如對更新檔案進行加密，防止被惡意修改等等一些內容還需要不斷完善。下一篇文章繼續和大家分享關於React Native的內容，如何與原生進行互動，敬請期待~



相關文章