iOS-ReactNative 体验

ReactNative  是Facebook创建的利用前端代码打包APP的一套东西以下简称RN

一、RN环境搭建相信各大搜索引擎都有了在这里说一下我用那些方法遇到的问题以及注意事项：

1、初始化（init）时候总是配置文件不识别，缺少文件，解决办法：在init时候直接给上项目版本号：

react-native init FirstRN  --version 0.42.0

2、iOS加载RN的JS文件分为本地加载和根据IP加载

本地加载：

NSURL * jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:filePath fallbackResource:nil];

IP路径加载：

NSURL * jsCodeLocation = [NSURL URLWithString:[NSString stringWithFormat:@"%@%@.bundle?platform=ios&dev=true",JSIP,urlStr]];

3、加载JS文件

ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 0, JWidth, JHeight - 64) WithUrl:@"index.JSios"];

[self.view addSubview:reactView];

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(doPushNotification:) name:@"RNOpenOneVC" object:nil];

4、接受JS传递的值

RCT_EXPORT_MODULE(RTModule)

//RN跳转原生界面

RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){

//主要这里必须使用主线程发送,不然有可能失效

dispatch_async(dispatch_get_main_queue(), ^{

[[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];

}

二、RN开发中常用的控件以及布局（Demo中都有涉及）：

本项目主要是集成了ReactNative，采用nodejs的开发语言，给iOS端开发页面和逻辑，提升开发效率！

主要包含了：

（1），ReactNative      listView的使用

（2），ReactNative      listView配合无限轮播图使用

（3），ReactNative      listView配合上啦加载下拉刷新使用

（4），ReactNative      常规控件的使用

（5），ReactNative      Tabbar底部导航  nav顶部导航的使用

（6），ReactNative      在原生交互传值的使用

（7），ReactNative      请求网络数据并解析调用

（8），ReactNative      webview的使用

三、github地址：https://github.com/JamesBondMine/RN2