标签：
微软的CodePush热更新非常难用大家都知道，速度跟被墙了没什么区别。
另外一方面，我们不希望把代码放到别人的服务器。自己写接口更新总归感觉安全一点。
so，就来自己搞个React-Native APP的热更新管理工具吧。暂且命名为hotdog。
/**************************************************/
首先我们要弄清react-native启动的原理，是直接调用jslocation的jsbundle文件和assets资源文件。
由此，我们可以自己通过的服务器接口去判断版本，并下载最新的然后替换相应的文件，然后从这个文件调用启动APP。这就像之前的一些H5APP一样做版本的管理。
以iOS为例，我们需要分以下几步去搭建这个自己的RN升级插件：
一、设置默认jsbundle地址（比如document文件夹）：
1.首先打包的时候把jsbundle和assets放入copy bundle resource，每次启动后，检测document文件夹是否存在，不存在则拷贝到document文件夹，然后给RN框架读取启动。
我们建立如下的bundle文件管理类：
MXBundleHelper.h
#import <Foundation/Foundation.h> @interface MXBundleHelper : NSObject +(NSURL *)getBundlePath; @end
MXBundleHelper.m
#import "MXBundleHelper.h" #import "RCTBundleURLProvider.h" @implementation MXBundleHelper +(NSURL *)getBundlePath{ #ifdef DEBUG NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; return jsCodeLocation; #else //需要存放和读取的document路径 //jsbundle地址 NSString *jsCachePath = [NSString stringWithFormat:@"%@/\%@",NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0],@"main.jsbundle"]; //assets文件夹地址 NSString *assetsCachePath = [NSString stringWithFormat:@"%@/\%@",NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0],@"assets"]; //判断JSBundle是否存在 BOOL jsExist = [[NSFileManager defaultManager] fileExistsAtPath:jsCachePath]; //如果已存在 if(jsExist){ NSLog(@"js已存在: %@",jsCachePath); //如果不存在 }else{ NSString *jsBundlePath = [[NSBundle mainBundle] pathForResource:@"main" ofType:@"jsbundle"]; [[NSFileManager defaultManager] copyItemAtPath:jsBundlePath toPath:jsCachePath error:nil]; NSLog(@"js已拷贝至Document: %@",jsCachePath); } //判断assets是否存在 BOOL assetsExist = [[NSFileManager defaultManager] fileExistsAtPath:assetsCachePath]; //如果已存在 if(assetsExist){ NSLog(@"assets已存在: %@",assetsCachePath); //如果不存在 }else{ NSString *assetsBundlePath = [[NSBundle mainBundle] pathForResource:@"assets" ofType:nil]; [[NSFileManager defaultManager] copyItemAtPath:assetsBundlePath toPath:assetsCachePath error:nil]; NSLog(@"assets已拷贝至Document: %@",assetsCachePath); } return [NSURL URLWithString:jsCachePath]; #endif }
二、做升级检测，有更新则下载，然后对本地文件进行替换:
假如我们不立即做更新，可以更新后替换，然后不会影响本次APP的使用，下次使用就会默认是最新的了。
如果立即更新的话，需要使用到RCTBridge类里的reload函数进行重启。
这里通过NSURLSession进行下载，然后zip解压缩等方法来实现文件的替换。
MXUpdateHelper.h
#import <Foundation/Foundation.h> typedef void(^FinishBlock) (NSInteger status,id data); @interface MXUpdateHelper : NSObject +(void)checkUpdate:(FinishBlock)finish; @end
MXUpdateHelper.m
#import "MXUpdateHelper.h" @implementation MXUpdateHelper +(void)checkUpdate:(FinishBlock)finish{ NSString *url = @"http://www.xxx.com/xxxxxxx"; NSMutableURLRequest *newRequest = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:url]]; [newRequest setHTTPMethod:@"GET"]; [NSURLConnection sendAsynchronousRequest:newRequest queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse * response, NSData * data, NSError * connectionError) { if(connectionError == nil){ //请求自己服务器的API，判断当前的JS版本是否最新 /* { "version":"1.0.5", "fileUrl":"http://www.xxxx.com/xxx.zip", "message":"有新版本，请更新到我们最新的版本", "forceUpdate:"NO" } */ //假如需要更新 NSString *curVersion = @"1.0.0"; NSString *newVersion = @"2.0.0"; //一般情况下不一样，就是旧版本了 if(![curVersion isEqualToString:newVersion]){ finish(1,data); }else{ finish(0,nil); } } }]; } @end
三、APPdelegate中的定制，弹框，直接强制更新等
如果需要强制刷新reload，我们新建RCTView的方式也需要稍微改下，通过新建一个RCTBridge的对象。
因为RCTBridge中有reload的接口可以使用。
#import "AppDelegate.h" #import "RCTBundleURLProvider.h" #import "RCTRootView.h" #import "MXBundleHelper.h" #import "MXUpdateHelper.h" #import "MXFileHelper.h" #import "SSZipArchive.h" @interface AppDelegate()<UIAlertViewDelegate> @property (nonatomic,strong) RCTBridge *bridge; @property (nonatomic,strong) NSDictionary *versionDic; @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { NSURL *jsCodeLocation; jsCodeLocation = [MXBundleHelper getBundlePath]; _bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions]; RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge moduleName:@"MXVersionManager" initialProperties:nil]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible]; __weak AppDelegate *weakself = self; //更新检测 [MXUpdateHelper checkUpdate:^(NSInteger status, id data) { if(status == 1){ weakself.versionDic = data; /* 这里具体关乎用户体验的方式就多种多样了，比如自动立即更新，弹框立即更新，自动下载下次打开再更新等。 */ UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:data[@"message"] delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"现在更新", nil]; [alert show]; //进行下载，并更新 //下载完，覆盖JS和assets，并reload界面 // [weakself.bridge reload]; } }]; return YES; } - (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{ if(buttonIndex == 1){ //更新 [[MXFileHelper shared] downloadFileWithURLString:_versionDic[@"fileurl"] finish:^(NSInteger status, id data) { if(status == 1){ NSLog(@"下载完成"); NSError *error; NSString *filePath = (NSString *)data; NSString *desPath = [NSString stringWithFormat:@"%@",NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0]]; [SSZipArchive unzipFileAtPath:filePath toDestination:desPath overwrite:YES password:nil error:&error]; if(!error){ NSLog(@"解压成功"); [_bridge reload]; }else{ NSLog(@"解压失败"); } } }]; } }
流程简单，通过接口请求版本，然后下载到document去访问。 其中需要做Zip的解压缩，以及文件拷贝等。
运行iOS工程可以看到效果。 初始为1.0.0版本，然后更新后升级到1.0.1版本。
demo: https://github.com/rayshen/MXHotdog
React-Native 告别CodePush，自建热更新版本升级环境
标签：
原文地址：http://www.cnblogs.com/rayshen/p/5737293.html
