iOS端實現React Native差別化增量更新

時間 2019-12-09

標籤 ios 實現 react native 差別增量更新欄目 iOS 简体版

原文原文鏈接

做爲一名iOS原生開發工程師，經過一個禮拜的面試以後發現，原來並不想學的react-native真的是火的一塌糊塗，座標：杭州，不少公司招聘iOS開發除了原來的OC和Swift，多了一門新語言：react-native，真的是要人老命啊，Swift4.0剛剛看完，又得花時間學RN。入職以後也開始學react-native，算是小白一枚，下面是個人我的總結，有大神看出錯誤，請不要打我或者罵我，聯繫我郵箱dadadoubi@qq.com。html

RN具備的優點有不少，跨平臺開發，一套代碼Android和iOS通用，熱更新，不用一直等蘋果爸爸慢吞吞的審覈流程，所謂工欲善其事，必先利其器，RN的熱更新部署確定得學下，今天就總結一下一個剛學RN的小白對熱更新的理解。node

我的理解，RN的熱更新有點相似App的版本更新，app內版本號與server端匹配，來判斷是否要更新，替換加載的jsbundle文件，而後加載新的jsbundle文件來實現版本更新，那麼實質上就是把app內要加載的jsbundle文件替換掉就OK了。react

原理分析

簡單介紹了一下原理，那麼廢話很少說，直接開始寫了，這篇文章主要講的是前面兩步：jsbundle的打包命令和差別化的比較android

react-native打ios離線包

打包命令說明ios

react-native bundle
Options:
--entry-file <path>          Path to the root JS file, either absolute or relative to JS root
（通常爲index.js文件）
--platform [string]          Either "ios" or "android"
（RN入口文件的路徑, 絕對路徑或相對路徑）
--transformer [string]       Specify a custom transformer to be used

--dev [boolean]              If false, warnings are disabled and the bundle is minified
（若是爲false, 警告會不顯示而且打出的包的大小會變小，默認爲--dev true）
--prepack                    When passed, the output bundle will use the Prepack format.
（當經過時, 打包輸出將使用Prepack格式化，默認爲--prepack  false）
--bridge-config [string]     File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json
（使用Prepack的一個json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json）
 --bundle-output <string>     File name where to store the resulting bundle, ex. /tmp/groups.bundle
（打包後的文件輸出目錄, 例: /tmp/groups.bundle）
--bundle-encoding [string]   Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).[default: "utf8"]
（打離線包的格式 可參考連接https://nodejs.org/api/buffer.html#buffer_buffer.默認爲utf-8格式）
---sourcemap-output [string]  File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
（生成Source Map，但0.14以後再也不自動生成source map，須要手動指定這個參數。例: /tmp/groups.map）
--assets-dest [string]       Directory name where to store assets referenced in the bundle
（打包時圖片資源的存儲路徑）
--verbose                    Enables logging
（顯示打包過程）
--reset-cache                Removes cached files
（移除緩存文件）
--config [string]            Path to the CLI configuration file
（命令行的配置文件路徑）

事實上上面打包命令說明不看也沒事，下面是具體操做

1. cd [項目路徑]
2.  在react-native根目錄下的ios目錄下新建bundle文件夾（mkdir ./ios/bundle）（注意：輸入打包命令前必須先新建bundle文件夾）
3. 打包命令：react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle/ 
4. 結果展現![clipboard.png](/img/bV8rS9)

當rn項目中有引用圖片資源時，打包出來爲下面示意圖（若是圖片資源是在xcode工程內部時則不會生成）git

patches.pad差別化文件終端生成方案

利用google的diff文件（資料查出來，這個比較受歡迎，同時也兼容Objective-C），github地址：https://github.com/google/dif...github

1.終端輸入：git clone https://github.com/LiuC520/no...
2.終端輸入：cd nodediffpatch && npm i
3.終端輸入：sudo npm link
4.把新舊文件放入nodediffpatch/patch目錄下面試

5.終端輸入：patbundle patch -o test01old.jsbundle -n test01new.jsbundlenpm

這樣，用終端的生成差別化文件就OK了。json

iOS實現生成差別化文件

首先，得先把diff-match-patch下載下來，須要集成它
集成有優化方案有大神知道的話跟我說一下，我反正是用很粗糙的作法，將它的類直接拖入你的工程中，不知道的也能夠用個人方式。簡單在，直接，嘿嘿！

把這些文件拖入到工程中，選擇create group方式，（別噴，要臉，是在不知道怎麼集成）「集成」後的項目結構

而後導入（#import "DiffMatchPatch.h"）就能夠開始用了，下面演示用l1.txt和l2.txt文件來展現，能夠比較直觀的看出效果

l1.txt文本：123
l2.txt文本：12345

- (void)demo1{
  // 獲取l1.txt文件路徑
  NSString *path01 = [[NSBundle mainBundle]pathForResource:@"l1" ofType:@"txt"];
  // 根據l1.txt文件路徑獲取data內容
  NSData *data01 = [NSData dataWithContentsOfFile:path01];
  // 將data內容轉換成字符串格式
  NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding];
  // 獲取l2.txt文件路徑
  NSString *path02 = [[NSBundle mainBundle]pathForResource:@"l2" ofType:@"txt"];
  // 根據l2.txt文件路徑獲取data內容
  NSData *data02 = [NSData dataWithContentsOfFile:path02];
  // 將data內容轉換成字符串格式
  NSString *str02 = [[NSString alloc] initWithData:data02 encoding:NSUTF8StringEncoding];
  // 建立DiffMatchPatch工具類對象
  DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
  // 對比文件內容
  // 執行該語句以後會在bundle目錄下生成patches.bat文件(差別補丁文件)
  NSMutableArray *patchesArr = [patch diff_mainOfOldString:str01 andNewString:str02 checkLines:YES];
  // 生成差別補丁包
  NSArray *patchesArr1 = [patch patch_makeFromDiffs:patchesArr];
  // 解析補丁包
  NSArray *newArray = [patch patch_apply:patchesArr1 toString:str01];
  //寫入到新文件(注意:這邊爲了在PC端更加直觀的看,直接寫入到絕對路徑)
  BOOL isTrue = [newArray[0] writeToFile:@"/Users/devil/Desktop/本身的/RNPlatForm/ios/l1.txt" atomically:YES encoding:NSUTF8StringEncoding error:nil];
  if (isTrue) {
    NSLog(@"寫入成功");
  }else{
    NSLog(@"寫入失敗");
  }
}

執行代碼後：
l1.txt文本：12345

固然，你能夠打印一下path01路徑字符串，在這個路徑下會生成patches.pat差別化文件，我執行的時候打斷點發現

NSMutableArray *patchesArr = [patch diff_mainOfOldString:str01 andNewString:str02 checkLines:YES];

執行該語句以後生成，可是用[[NSBundle mainBundle]pathForResource:@"patches" ofType:@"pat"];訪問不到文件，有大神知道什麼緣由能夠跟我說下。

iOS實現patches.pat與舊jsbundle離線包合併獲得新的jsbundle離線包

- (void)demo2{
  // 獲取l1.txt文件路徑
  NSString *path01 = [[NSBundle mainBundle]pathForResource:@"l1" ofType:@"txt"];
  // 根據l1.txt文件路徑獲取data內容
  NSData *data01 = [NSData dataWithContentsOfFile:path01];
  // 將data內容轉換成字符串格式
  NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding];
  // 建立DiffMatchPatch工具類對象
  DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
  // 獲取差別化文件包路徑
  NSString *patchesPath = [[NSBundle mainBundle]pathForResource:@"patches.pat" ofType:nil];
  //獲取差別化文件內容
  NSData *patchesData = [NSData dataWithContentsOfFile:patchesPath];
  //解析差別化文件內容
  NSString *patchesStr = [[NSString alloc]initWithData:patchesData encoding:NSUTF8StringEncoding];
  //轉換pat
  NSMutableArray *patchesArr = [patch patch_fromText:patchesStr error:nil];
  // 解析補丁包
  NSArray *newArray = [patch patch_apply:patchesArr toString:str01];
  //獲取新文件路徑
//  NSString *newFilePath = [[NSBundle mainBundle]pathForResource:@"text3" ofType:@"txt"];
  //寫入到新文件(注意:這邊爲了在PC端更加直觀的看,直接寫入到絕對路徑)
  BOOL isTrue = [newArray[0] writeToFile:@"/Users/devil/Desktop/本身的/RNPlatForm/ios/text3.txt" atomically:YES encoding:NSUTF8StringEncoding error:nil];
  if (isTrue) {
    NSLog(@"寫入成功");
  }else{
    NSLog(@"寫入失敗");
  }
}

實現本地更新離線包

//建立兩個按鈕，第一個按鈕跳轉RN界面，加載jsbundle包，第二個按鈕負責更新jsbundle包
UIButton *btn4 = [[UIButton alloc]init];
  [btn4 setTitle:@"第五個" forState:UIControlStateNormal];
  [btn4 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
  btn4.frame = CGRectMake(40, 170, 60, 30);
  [btn4 addTarget:self action:@selector(clickFifth) forControlEvents:UIControlEventTouchUpInside];
  [self.view addSubview:btn4];
  
  UIButton *btn5 = [[UIButton alloc]init];
  [btn5 setTitle:@"更新第五個界面" forState:UIControlStateNormal];
  [btn5 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
  btn5.frame = CGRectMake(40, 200, 60, 30);
  [btn5 addTarget:self action:@selector(demo2) forControlEvents:UIControlEventTouchUpInside];
  [self.view addSubview:btn5];
//btn4按鈕點擊事件
- (void)clickFifth{
  NSURL *jsCodeLocation;
  jsCodeLocation = [[NSBundle mainBundle]URLForResource:@"test01old" withExtension:@"jsbundle"];
  [self creactRNPath:jsCodeLocation moduleName:@"test01platcode"]; 
}

- (void)creactRNPath:(NSURL *)jsCodeLocation moduleName:(NSString *)moduleName{
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:moduleName
                                               initialProperties:nil
                                                   launchOptions:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  UIViewController *rootViewController = [[UIViewController alloc]init];
  rootViewController.view = rootView;
  [rootViewController.navigationController setNavigationBarHidden:YES animated:YES];
  [self.navigationController pushViewController:rootViewController animated:YES];
}
//btn5按鈕點擊事件
- (void)demo2{
  // 獲取test01old.jsbundle文件路徑
  NSString *path01 = [[NSBundle mainBundle]pathForResource:@"test01old" ofType:@"jsbundle"];
  // 根據test01old.jsbundle文件路徑獲取data內容
  NSData *data01 = [NSData dataWithContentsOfFile:path01];
  // 將data內容轉換成字符串格式
  NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding];
  // 建立DiffMatchPatch工具類對象
  DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
  // 獲取差別化文件包路徑
  NSString *patchesPath = [[NSBundle mainBundle]pathForResource:@"test01patches.pat" ofType:nil];
  //獲取差別化文件內容
  NSData *patchesData = [NSData dataWithContentsOfFile:patchesPath];
  //解析差別化文件內容
  NSString *patchesStr = [[NSString alloc]initWithData:patchesData encoding:NSUTF8StringEncoding];
  //轉換pat
  NSMutableArray *patchesArr = [patch patch_fromText:patchesStr error:nil];
  // 解析補丁包
  NSArray *newArray = [patch patch_apply:patchesArr toString:str01];
  //寫入到新文件
  BOOL isTrue = [newArray[0] writeToFile:path01 atomically:YES encoding:NSUTF8StringEncoding error:nil];
  if (isTrue) {
    NSLog(@"寫入成功");
  }else{
    NSLog(@"寫入失敗");
  }
}