OC中嵌入ReactNative（注意点!!）

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

启动成功会出现下面的画面：

集成后的效果

github： ReactNative