PS: 详细教程请移步[朱_源浩]React Native 集成到原生项目
第一步：创建OC项目
1.打开xcode，新建一个名为ReactNativeForOC（注意：名字中最好不要带符号）的OC项目。（swift下午试了，头文件无法导入不知道为什么）
第二步：集成React Native
1.1. 在xcodeproj目录下创建一个ReactComponent文件夹（不需要导入到项目中）。
2.1. 创建一个package.json文件, 用于初始化react-native。
{
// 项目名称
"name": "ReactNativeForOC",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
//rn的版本信息
"dependencies": {
"react": "15.3.1",
"react-native": "^0.32.1"
}
}
2.2. 创建 index.ios.js（js文件入口）
注意：js中class名和组件注册时的名字要同OC项目名相对应
2.3. 安装React Native依赖包
注意：一定要在ReactComponent目录下运行命令行！！！而不是在项目名称文件夹下，我掉坑了一回！
第三步
3.1. Cocoapods集成React Native
target 'ReactNativeForOC' do
#注意路径是否正确，这种方法安装应该是比较快的，1、2分钟左右
pod 'React', :path => ‘./ReactComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS',
]
end
第四步 在需要使用RN的文件中导入<RCTRootView.h>
4.1. 向对应ViewController 添加RCTRootView
- (void)viewDidLoad {
[super viewDidLoad];
/**
* 注意:如果这里的URL用的是localHost的话，在plist中要加
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
*/
NSString * strUrl = @"http://localHost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
/**
参数一：加载页面的地址可以理解为（热更新链接）
参数二：项目名称
:returns:
*/
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"ReactNativeForOC"
initialProperties:nil
launchOptions:nil];
rootView.frame = CGRectMake(0, 64, self.view.frame.size.width, 200);
[self.view addSubview:rootView];
}
最后
注意：在运行项目前先用命令行cd 到ReactComponent文件夹目录下，然后命令行启动服务(如果你报'Command 'start' unrecognized'错误的话说明cd的文件目录不对)
react-native start
启动成功会出现下面的画面：
1.pic.jpg
集成后的效果
Simulator Screen Shot 2016年9月9日 下午5.20.46.png
github： ReactNative
