React Native 学习记录

由于node_modules文件夹在别的地方，所以执行命令时，有下面改动的地方：

在植入到原生应用中 http://reactnative.cn/docs/embedded-app-ios.html#content

通过CocoaPods安装React Native

# 取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径。
pod 'React', :path => './node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # 添加其他你想在工程中使用的依赖。
]

这里的path 指定的是本地路劲，此目录下一定要有.podspec文档，使用时候相对路劲总是不对，后来改用绝对路径

启动开发服务器

官方文档写的

配置的JS_DIR 路径不对，后来改成
npm run start -- --root "/Users/huhmf/Desktop/myCode/facebook/reactDemo/reactDemo/ReactComponent"

npm start -- --root ../reactDemo/reactDemo/ReactComponent --assetRoots ../reactDemo/reactDemo/Assets.xcassets

packager/packager.sh --assetRoots ../reactDemo/reactDemo/Assets.xcassets --root ../reactDemo/reactDemo/ReactComponent

上面3命令都是可以更改执行目录的，灰色部分就是绝对/相对路径。

代码部分

//下载jsbundle 压缩文件
-(void)download{
    WS(weakself)
    [NetRequest NetRequestDownloadWithRequestURL:@"https://github.com/ymcao/TopNewsIOS/raw/master/filezip/news_jsbundle.zip" WithParameter:nil WithReturnValeuBlock:^(id returnValue) {
        
        NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
        NSString *documentpath = ([paths count] > 0) ? [paths objectAtIndex:0] : nil;
        NSString* unzipfrom = [documentpath stringByAppendingFormat:@"%@%@",@"/",returnValue];
        
        NSRange range = [returnValue rangeOfString:@"."];
        NSString * result = [returnValue substringToIndex:range.location];
        NSString* unzipto = [documentpath stringByAppendingFormat:@"%@%@",@"/",result];
        NSLog(@"%@",unzipfrom);
        
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
            [SSZipArchive unzipFileAtPath:unzipfrom toDestination:unzipto progressHandler:^(NSString *entry, unz_file_info zipInfo, long entryNumber, long total) {
                
            } completionHandler:^(NSString *path, BOOL succeeded, NSError *error) {
                if(succeeded){
                    dispatch_async(dispatch_get_main_queue(),^{
                        [weakself initReactModule:result];
                    });
                }
            }];
           
        });
        
    } WithErrorCodeBlock:^(id errorCode) {
        
    }];
}
// 初始化React模块,RCTRootView
-(void)initReactModule:(NSString*)filename{

    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *documentpath = ([paths count] > 0) ? [paths objectAtIndex:0] : nil;
    NSString* unzipto = [documentpath stringByAppendingFormat:@"%@%@",@"/",filename];
    
    NSBundle *bundle=[NSBundle bundleWithPath:unzipto];
    NSURL *jsCodeLocation= [bundle URLForResource:@"news.ios" withExtension:@"jsbundle"];
    NSLog(@"%@", [bundle resourcePath]);
    rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"topnews"
                                    initialProperties:@{@"newsid":@"index"}
                                                     launchOptions:nil];
    [self.view addSubview:rootView];
    [rootView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.mas_equalTo(SCREEN_WIDTH);
        make.height.mas_equalTo(SCREEN_HEIGHT-TAB_BAR_HEIGHT-_scrollMenu.frame.size.height);
        make.top.equalTo(_scrollMenu.mas_bottom);
    }];
}

来源：http://www.cnblogs.com/dhui69/p/5102437.html

标签

react

nsstring

bundle