前言
作為一名iOS原生開發(fā)工程師，通過一個(gè)禮拜的面試之后發(fā)現(xiàn)，原來并不想學(xué)的react-native真的是火的一塌糊涂，坐標(biāo)：杭州，很多公司招聘iOS開發(fā)除了原來的OC和Swift，多了一門新語言：react-native，真的是要人老命啊，Swift4.0剛剛看完，又得花時(shí)間學(xué)RN。入職之后也開始學(xué)react-native，算是小白一枚，下面是我的個(gè)人總結(jié)，有大神看出錯(cuò)誤，請不要打我或者罵我，聯(lián)系我郵箱[email protected]。
RN具有的優(yōu)勢有很多，跨平臺(tái)開發(fā)，一套代碼Android和iOS通用，熱更新，不用一直等蘋果爸爸慢吞吞的審核流程，所謂工欲善其事，必先利其器，RN的熱更新部署肯定得學(xué)下，今天就總結(jié)一下一個(gè)剛學(xué)RN的小白對熱更新的理解。
個(gè)人理解，RN的熱更新有點(diǎn)類似App的版本更新，app內(nèi)版本號與server端匹配，來判斷是否要更新，替換加載的jsbundle文件，然后加載新的jsbundle文件來實(shí)現(xiàn)版本更新，那么實(shí)質(zhì)上就是把a(bǔ)pp內(nèi)要加載的jsbundle文件替換掉就OK了。
原理分析
簡單介紹了一下原理，那么廢話不多說，直接開始寫了，這篇文章主要講的是前面兩步：jsbundle的打包命令和差異化的比較
react-native打ios離線包
打包命令說明
react-native bundleOptions:--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, 警告會(huì)不顯示并且打出的包的大小會(huì)變小，默認(rèn)為--dev true）--prepack When passed, the output bundle will use the Prepack format.（當(dāng)通過時(shí), 打包輸出將使用Prepack格式化，默認(rèn)為--prepack false）--bridge-config [string] File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json（使用Prepack的一個(gè)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.默認(rèn)為utf-8格式）---sourcemap-output [string] File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map（生成Source Map，但0.14之后不再自動(dòng)生成source map，需要手動(dòng)指定這個(gè)參數(shù)。例: /tmp/groups.map）--assets-dest [string] Directory name where to store assets referenced in the bundle（打包時(shí)圖片資源的存儲(chǔ)路徑）--verbose Enables logging（顯示打包過程）--reset-cache Removes cached files（移除緩存文件）--config [string] Path to the CLI configuration file（命令行的配置文件路徑）
事實(shí)上上面打包命令說明不看也沒事，下面是具體操作
1. cd [項(xiàng)目路徑]
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. 結(jié)果展示
當(dāng)rn項(xiàng)目中有引用圖片資源時(shí)，打包出來為下面示意圖（如果圖片資源是在xcode工程內(nèi)部時(shí)則不會(huì)生成）
patches.pad差異化文件終端生成方案
利用google的diff文件（資料查出來，這個(gè)比較受歡迎，同時(shí)也兼容Objective-C），github地址：https://github.com/google/dif...
1.終端輸入：git clone https://github.com/LiuC520/nodediffpatch.git
2.終端輸入：cd nodediffpatch && npm i
3.終端輸入：sudo npm link
4.把新舊文件放入nodediffpatch/patch目錄下
5.終端輸入：patbundle patch -o test01old.jsbundle -n test01new.jsbundle
這樣，用終端的生成差異化文件就OK了。
iOS實(shí)現(xiàn)生成差異化文件
首先，得先把diff-match-patch下載下來，需要集成它
集成有優(yōu)化方案有大神知道的話跟我說一下，我反正是用很粗糙的做法，將它的類直接拖入你的工程中，不知道的也可以用我的方式。簡單在，直接，嘿嘿！
把這些文件拖入到工程中，選擇create group方式，（別噴，要臉，是在不知道怎么集成）“集成”后的項(xiàng)目結(jié)構(gòu)
然后導(dǎo)入（#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"]; // 根據(jù)l1.txt文件路徑獲取data內(nèi)容 NSData *data01 = [NSData dataWithContentsOfFile:path01]; // 將data內(nèi)容轉(zhuǎn)換成字符串格式 NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding]; // 獲取l2.txt文件路徑 NSString *path02 = [[NSBundle mainBundle]pathForResource:@"l2" ofType:@"txt"]; // 根據(jù)l2.txt文件路徑獲取data內(nèi)容 NSData *data02 = [NSData dataWithContentsOfFile:path02]; // 將data內(nèi)容轉(zhuǎn)換成字符串格式 NSString *str02 = [[NSString alloc] initWithData:data02 encoding:NSUTF8StringEncoding]; // 創(chuàng)建DiffMatchPatch工具類對象 DiffMatchPatch *patch = [[DiffMatchPatch alloc]init]; // 對比文件內(nèi)容 // 執(zhí)行該語句之后會(huì)在bundle目錄下生成patches.bat文件(差異補(bǔ)丁文件) NSMutableArray *patchesArr = [patch diff_mainOfOldString:str01 andNewString:str02 checkLines:YES]; // 生成差異補(bǔ)丁包 NSArray *patchesArr1 = [patch patch_makeFromDiffs:patchesArr]; // 解析補(bǔ)丁包 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(@"寫入失敗"); }}執(zhí)行代碼后：
l1.txt文本：12345
當(dāng)然，你可以打印一下path01路徑字符串，在這個(gè)路徑下會(huì)生成patches.pat差異化文件，我執(zhí)行的時(shí)候打斷點(diǎn)發(fā)現(xiàn)
NSMutableArray *patchesArr = [patch diff_mainOfOldString:str01 andNewString:str02 checkLines:YES];
執(zhí)行該語句之后生成，但是用[[NSBundle mainBundle]pathForResource:@"patches" ofType:@"pat"];訪問不到文件，有大神知道什么原因可以跟我說下。
iOS實(shí)現(xiàn)patches.pat與舊jsbundle離線包合并得到新的jsbundle離線包
- (void)demo2{ // 獲取l1.txt文件路徑 NSString *path01 = [[NSBundle mainBundle]pathForResource:@"l1" ofType:@"txt"]; // 根據(jù)l1.txt文件路徑獲取data內(nèi)容 NSData *data01 = [NSData dataWithContentsOfFile:path01]; // 將data內(nèi)容轉(zhuǎn)換成字符串格式 NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding]; // 創(chuàng)建DiffMatchPatch工具類對象 DiffMatchPatch *patch = [[DiffMatchPatch alloc]init]; // 獲取差異化文件包路徑 NSString *patchesPath = [[NSBundle mainBundle]pathForResource:@"patches.pat" ofType:nil]; //獲取差異化文件內(nèi)容 NSData *patchesData = [NSData dataWithContentsOfFile:patchesPath]; //解析差異化文件內(nèi)容 NSString *patchesStr = [[NSString alloc]initWithData:patchesData encoding:NSUTF8StringEncoding]; //轉(zhuǎn)換pat NSMutableArray *patchesArr = [patch patch_fromText:patchesStr error:nil]; // 解析補(bǔ)丁包 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(@"寫入失敗"); }}實(shí)現(xiàn)本地更新離線包
//創(chuàng)建兩個(gè)按鈕，第一個(gè)按鈕跳轉(zhuǎn)RN界面，加載jsbundle包，第二個(gè)按鈕負(fù)責(zé)更新jsbundle包UIButton *btn4 = [[UIButton alloc]init]; [btn4 setTitle:@"第五個(gè)" 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:@"更新第五個(gè)界面" 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按鈕點(diǎn)擊事件- (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總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對VEVB武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
