react native 熱更新的好處react
js腳本代碼改變了,好比對ui進行了一些修改,客戶端要是想更新的話,若是直接下載apk 或者ipa,一個是浪費流量,還有比較麻煩ios
熱更新只要下載打包好的bundle 文件,而後進行替換就能夠了react-native
思路比較簡單,客戶端跟服務端都維持 一個bundle版本信息,若是服務端的版本比客戶端的 版本新就下載,而後替換掉 從新渲染就OK了緩存
具體實現,若是沒有 熱更新,載入bundle的代碼是這樣的服務器
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
若是加入熱更新,是這樣的網絡
NSURL *jsCodeLocation=nil; jsCodeLocation=[self getBundle]; if(jsCodeLocation==nil) { jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; }
getBundle 函數就包含加載 服務端獲取到的bundle 的邏輯
-(NSURL *) getBundle { NSString* ss=@"#####";//服務端bundle版本號的地址 NSString* str = [self httpGet:ss]; NSString *pathDocuments=[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0]; NSString *createPath=[NSString stringWithFormat:@"%@/%@",pathDocuments,@"version.txt"];//用文件名補全路徑 Boolean bb=false; NSFileManager *defaultManager; defaultManager = [NSFileManager defaultManager]; NSURL *nsurl=nil; if ([[NSFileManager defaultManager] fileExistsAtPath:createPath])//判斷文件是否已存在 { NSString* fileContents = [NSString stringWithContentsOfFile:createPath encoding:NSUTF8StringEncoding error:nil]; int a=[str intValue];//服務端bundle版本號 int b=[fileContents intValue];//客戶端bundle版本信息 if(a>b)//若是服務端的bundle版本比加大,就刪除客戶端的bundle,而後更新成服務端的 { if ([[NSFileManager defaultManager] fileExistsAtPath:createPath])//判斷文件是否已存在 { [defaultManager removeItemAtPath:createPath error:NULL]; } [self storeFile:@"version.txt" content:str]; bb=true; } else//若是發現下載的bundle文件不存在,也要下載更新 { createPath=[NSString stringWithFormat:@"%@/%@",pathDocuments,@"main.jsbundle"]; if (![[NSFileManager defaultManager] fileExistsAtPath:createPath])//判斷文件是否已存在 { bb=true; } } } else//若是客戶端的bundle是空,也要下載 { [self storeFile:@"version.txt" content:str]; bb=true; } if (bb==true) { createPath=[NSString stringWithFormat:@"%@/%@",pathDocuments,@"main.jsbundle"]; if ([[NSFileManager defaultManager] fileExistsAtPath:createPath])//判斷文件是否已存在 { [defaultManager removeItemAtPath:createPath error:NULL]; } ss=@"####";//服務端bundle文件的地址 str = [self httpGet:ss]; NSString *fileName=[self storeFile:@"main.jsbundle" content:str]; nsurl=[NSURL fileURLWithPath:fileName];//這是bundle 文件的路徑 } else{ createPath=[NSString stringWithFormat:@"%@/%@",pathDocuments,@"main.jsbundle"]; nsurl=[NSURL fileURLWithPath:createPath];//這是bundle 文件的路徑 } return nsurl; } -(NSString *) httpGet:(NSString *)ss { //第一步,建立URL NSURL *url = [NSURL URLWithString:ss]; //第二步,經過URL建立網絡請求 NSURLRequest *request = [[NSURLRequest alloc]initWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:10]; //NSURLRequest初始化方法第一個參數:請求訪問路徑,第二個參數:緩存協議,第三個參數:網絡請求超時時間(秒) /*其中緩存協議是個枚舉類型包含: NSURLRequestUseProtocolCachePolicy(基礎策略) NSURLRequestReloadIgnoringLocalCacheData(忽略本地緩存) NSURLRequestReturnCacheDataElseLoad(首先使用緩存,若是沒有本地緩存,才從原地址下載) NSURLRequestReturnCacheDataDontLoad(使用本地緩存,從不下載,若是本地沒有緩存,則請求失敗,此策略多用於離線操做) NSURLRequestReloadIgnoringLocalAndRemoteCacheData(無視任何緩存策略,不管是本地的仍是遠程的,老是從原地址從新下載) NSURLRequestReloadRevalidatingCacheData(若是本地緩存是有效的則不下載,其餘任何狀況都從原地址從新下載)*/ //第三步,鏈接服務器 NSData *received = [NSURLConnection sendSynchronousRequest:request returningResponse:nil error:nil]; NSString *str = [[NSString alloc]initWithData:received encoding:NSUTF8StringEncoding]; return str; } //存儲文件 -(NSString *)storeFile:(NSString *)fileName content:(NSString *)writeContent { NSString *pathDocuments=[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0]; NSString *createPath=[NSString stringWithFormat:@"%@/%@",pathDocuments,fileName];//用文件名補全路徑 NSError *ReadFileError; NSString *readContent ; NSData *data ; if ([[NSFileManager defaultManager] fileExistsAtPath:createPath])//判斷文件是否已存在 { if (nil == writeContent) { readContent = [NSString stringWithContentsOfFile:createPath encoding:NSUTF8StringEncoding error:&ReadFileError]; }else{ data = [writeContent dataUsingEncoding:NSUTF8StringEncoding];//新文件的初始數據 [[NSFileManager defaultManager] createFileAtPath:createPath contents:data attributes:nil];//建立文件 readContent = [NSString stringWithContentsOfFile:createPath encoding:NSUTF8StringEncoding error:&ReadFileError]; } } else { if (nil == writeContent) { return nil; }else{ data = [writeContent dataUsingEncoding:NSUTF8StringEncoding];//新文件的初始數據 [[NSFileManager defaultManager] createFileAtPath:createPath contents:data attributes:nil];//建立文件 readContent = [NSString stringWithContentsOfFile:createPath encoding:NSUTF8StringEncoding error:&ReadFileError]; } } return createPath; }
以上就是主要代碼,有註釋說明意思ide
ios bundle打包腳本以下函數
react-native bundle --entry-file index.ios.js --bundle-output ./bundle/index.ios.bundle --platform ios --assets-dest ./bundle --dev false
上面的下載讀本地緩存 會更新不了,更正下,應該選這個ui
NSURLRequestReloadIgnoringLocalAndRemoteCacheData(無視任何緩存策略,不管是本地的仍是遠程的,老是從原地址從新下載)