扯會(huì)淡
RN具有的優(yōu)勢(shì)有很多(雖然坑更多,一代版本一筐坑)葡盗，跨平臺(tái)開發(fā)尘盼，一套代碼Android和iOS通用偷办，熱更新统舀，不用一直等蘋果爸爸慢吞吞的審核流程匆骗，既然要做RN,那么RN的熱更新部署肯定得學(xué)下，今天就總結(jié)一下一個(gè)剛學(xué)RN的小白對(duì)熱更新的理解誉简。
個(gè)人理解碉就，RN的熱更新有點(diǎn)類似App的版本更新，app內(nèi)版本號(hào)與server端匹配闷串，來判斷是否要更新瓮钥，替換加載的jsbundle文件，然后加載新的jsbundle文件來實(shí)現(xiàn)版本更新，那么實(shí)質(zhì)上就是把a(bǔ)pp內(nèi)要加載的jsbundle文件替換掉就OK了碉熄。
原理分析
自己整理的原理圖.png
react-native打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入口文件的路徑, 絕對(duì)路徑或相對(duì)路徑）
--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
（命令行的配置文件路徑）
-
具體操作
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é)果展示
生成的jsbundle離線包
一般為下面這種
生成的jsbundle離線包
patches.pad差異化文件終端生成方案
利用google的diff文件（資料查出來琼梆，這個(gè)比較受歡迎性誉，同時(shí)也兼容Objective-C），github地址：https://github.com/google/dif...
- $ git clone https://github.com/LiuC520/no...
- $ cd nodediffpatch && npm i
- $ sudo npm link
-
把新舊文件放入nodediffpatch/patch目錄下
新舊離線包 -
終端輸入：patbundle patch -o test01old.jsbundle -n test01new.jsbundle
生成的差異化文件
iOS實(shí)現(xiàn)生成差異化文件
簡(jiǎn)單方法:把diff-match-patch實(shí)現(xiàn)源碼拖進(jìn)工程中
選擇源碼
拖進(jìn)工程中
導(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工具類對(duì)象
DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
// 對(duì)比文件內(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端更加直觀的看,直接寫入到絕對(duì)路徑)
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
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工具類對(duì)象
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端更加直觀的看,直接寫入到絕對(duì)路徑)
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
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按鈕點(diǎn)擊事件
- (void)demo2{
// 獲取test01old.jsbundle文件路徑
NSString *path01 = [[NSBundle mainBundle]pathForResource:@"test01old" ofType:@"jsbundle"];
// 根據(jù)test01old.jsbundle文件路徑獲取data內(nèi)容
NSData *data01 = [NSData dataWithContentsOfFile:path01];
// 將data內(nèi)容轉(zhuǎn)換成字符串格式
NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding];
// 創(chuàng)建DiffMatchPatch工具類對(duì)象
DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
// 獲取差異化文件包路徑
NSString *patchesPath = [[NSBundle mainBundle]pathForResource:@"test01patches.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];
//寫入到新文件
BOOL isTrue = [newArray[0] writeToFile:path01 atomically:YES encoding:NSUTF8StringEncoding error:nil];
if (isTrue) {
NSLog(@"寫入成功");
}else{
NSLog(@"寫入失敗");
}
}
