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

最新推荐文章于 2021-12-23 22:25:58 发布
最新推荐文章于 2021-12-23 22:25:58 发布
阅读量546 收藏 1
点赞数
分类专栏： React Native 文章标签： 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的内容，如何与原生进行交互，敬请期待~



该隐的星球
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CodePush优化之减小更新包体积
...
12-19 1299
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 述 还有 10 天就要迎来 2019 新年，感慨 18 年过的好快，恍恍惚惚。2018 年经历了很多，人生最重要的事情，很开心。闲余时间浏览了这一年写过的博客，9 篇相对 17 年少了很多。时间不等人，什么事还是要提前计划往前做。本来是要等新年再和大家分享新的内容，回头看看还是以整数结尾这一年，也算欣慰。 这篇博...
【React-Native】安卓下载离线bundle文件后重新加载不重启APP解决办法
天。朝程序猿的专栏
05-09 2020
前言 以下内容仅针对安卓处理。做RN开发知道RN项目启动实际上是打包好的js文件,一般打包到android项目assets目录下，启动加载这里的bundle.js文件，当然RN也可以加载手机内存中的bundle.js 本人项目没有用code-push热更新，而是自己实现的，根据是否有新版本的bundle.js文件 下载重新加载本地bundle.js 之前下载新的bundle后都需要重新启动a...
安卓原生tinker热更新 + apk更新
weixin_44659286的博客
12-23 2318
热更新 FileDownLoadSubscriber package com.bonait.update_module.subscriber; import android.os.AsyncTask; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import io.reactivex.rxjava3.subscribers.DisposableSubscriber; import ok
项目用到的框架
code_dream_wq的博客
11-11 471
一、图片选择框架： https://github.com/bingoogolapple/BGAPhotoPicker-Android 1.9k start 单图选择 多图选择 拍照选择 图片选择预览（支持微博长图）、缩放查看 图片预览（支持微博长图）、缩放查看 支持 glide、picasso、universal-image-loader、xutils 图片加载库 支持配置列表滚动时是否暂停加载图片，列表停止滚动时恢复加载图片(用 xutils 作为图片加载库时该配置无效...
React Native 实现热更新并自动签名打包功能
08-19
主要介绍了React Native 实现热更新并自动签名打包，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
iOS端React Native差异化增量更新的实现方法
08-27
主要给大家介绍了关于iOS端React Native差异化增量更新的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
react_native详细实现热部署、增量差异化热更新.zip
10-25
react_native详细实现热部署、增量差异化热更新
React Native用Code Push 实现热更新
01-14
简单的用code push实现React Native 热更新的例子。具体安装步骤可以参考React http://blog.csdn.net/u011886447/article/details/78715407 -- React Native用CodePush实现热更新(一) 和 ...
reactnative-源码-热更新 iOS
10-29
reactnative-源码-热更新 iOS。下载后即可查看。
react项目热部署搭建
01-23
react项目热部署搭建，支持无刷新提交，可以在浏览器上显示
RnDynamicLoad:React Native实现多业务热部署方案
05-08
RnDynamicLoad React Native实现多业务热部署方案
react_native热更新
11-09
react_native 热更新功能的简介和相关第三方工具的介绍
浅谈react-native热更新react-native-pushy集成遇到的问题
11-28
主要步骤按官方文档实现，这里只记录遇到的一些小坑 ...以上这篇浅谈react-native热更新react-native-pushy集成遇到的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
React Native i18n国际化实现多语言切换
01-20
npm install react-native-i18n 2.在app下创建如下目录 3.各文件下的内容 i18n/index.js import I18n from 'react-native-i18n'; import en from './message/en'; import zh from './message/zh'; //初始化语言 ...
React-native 热更新(1) 脚本与图片更新+图片加载源码分析 android部分
guduyishuai的博客
02-08 3044
 react-native热更新分两个方面，脚本更新和图片更新，我们将在图片更新的地方分析一下图片加载的源码：1、脚本更新。  a、通过bundle文件更新  bundle文件   bundle文件包含了当前所有脚本中的信息，一开始建项目的时候，在asset中会有一个index.android.bundle文件。之后  每次更新的时候，我们需要通过以下命令生成bundle...
全量更新还是增量更新_习惯累积沉淀_新浪博客
wangduqiang747的博客
01-26 2170
讨论这个问题之前先说先程序是什么样的. 这个程序很多单位用, 大体上的流程是差不多的. 但也有不同之处,所有很多操作是限制是哪个单位的. 之前一直是增量更新, 现在我越来越觉得增量更新就是很偷懒很只考虑现在干活轻松不管以后维护.增量更新也有好处就是简单快. 但至少隔一段时间就有个里程碑的全量的包. 不然做出个历史版本是件很头疼的事. 就更开发一样.开发前之前先全部更新完. 这是个好...
React Native App的热部署
圣人男的博客
10-22 890
iOS应用发布到App Store 是需要审核的，而且审核通过时间不确定，有可能因为某一改变而受苹果规则限制而拒绝，有可能因为某一节日到来前App Store 需要审核的比较多而影响审核进度。但是移动应用产品更新的速度却非常的快，通常 1～2周或者几天时间就可以完成一次版本的迭代。 热部署 就是为了解决这一问题而产生的，不用提交新的审核，通过服务器动态更新React Native的 JavaScript 代码来实现应用的更新。
react项目打包发布
qq_35276073的博客
06-04 1646
使用create-react-app脚手架创建了react项目，现在想将其部署到公司的服务器上。 create-react-app封装了webpack，默认隐藏了webpack的配置，可以通过执行npm run eject命令将其显示出来，也可以不使用这种方法。 部署步骤： 1、打包react项目：npm run build 2、将其放到服务器能够访问的root目录下，如果是root目录下的项目名称文件夹下需要修改访问资源的路径（默认位置为根目录，其修改后的路径为相对路径） 否则控制台报错404，
react native如何实现热更新
最新发布
03-14
React Native可以通过CodePush实现热更新。CodePush是一个微软开发的热更新服务，可以让开发者在不发布新版本的情况下更新应用程序。开发者可以将更新包上传到CodePush服务器，然后应用程序会自动检查是否有新的更新...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值