iOS愉快的在现有工程上集成ReactNative

官网文档链接:http://facebook.github.io/react-native/docs/embedded-app-ios.html#content
准备工作神马的官网已经说明。

1. 在工程根目录执行命令：

npm install react-native

执行完成之后，你将会看到node_modules这个文件夹，出现在与.xcodeproj同级。

2.使用cocoapods集成ReactNative,podfile如下:

# Depending on how your project is organized, 
#your node_modules directory may be
# somewhere else; 
#tell CocoaPods where you've installed react-native from npmpod 
'React', :path => './node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
# Add any other subspecs you want to use in your project
]

当然，podfile完成之后，需要执行以下命令完成集成:

pod install

3.生成index.ios.js文件:

$ mkdir ReactComponent$ touch ReactComponent/index.ios.js

demo js文件如下:

'use strict';
var React = require('react-native');
var { Text, View} = React;
var styles = React.StyleSheet.create({ 
  container: { 
    flex: 1, 
    backgroundColor: 'yellow' 
  }
});

class Demo extends React.Component { 
    render() { 
      return ( 
          
              
                     This is a simple application.ReactNative-Integrating-with-Existing
              
          
      ) 
  }
}
React.AppRegistry.registerComponent('Demo', () => Demo);

4.在viewcontroller中加入如下代码:

- (void)viewDidLoad { 
     [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. 
     NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; 
    // For production use, this `NSURL` could instead point to a pre-bundled file on disk: // 
    // NSURL *jsCodeLocation = [[NSBundle mainBundle]            URLForResource:@"main" withExtension:@"jsbundle"]; // 
    // To generate that file, run the curl command and add the output to your main Xcode build target: // 
    // curl http://localhost:8081/index.ios.bundle -o main.jsbundle 
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName: @"Demo" initialProperties:nil launchOptions:nil]; 
    rootView.frame = self.view.bounds; 
    [self.view addSubview:rootView];
}

5.修改plist文件，因为iOS9之后，苹果对app请求网络做了修改

NSAppTransportSecurity
   
    NSAllowsArbitraryLoads
    

6.一切准备就绪之后，开启node服务器:

(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)

然后在xCode运行工程

7.出现红屏问题:如果这个时候出现红屏并出现如下log:

2016-01-31 17:24:26.544 [trace][tid:com.facebook.React.JavaScript][RCTJSCProfiler.m:63] JSC profiler is not supported. 2016-01-31 17:24:31.903 [error][tid:main] TransformError: /Users/zzx/HelloWorld/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/zzx/HelloWorld/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/zzx/HelloWorld/node_modules/react-deep-force-update/.babelrc.stage

这是因为reactnative版本问题导致。有两种解决办法。
1.降级到0.17.0，2.删除.babelrc 文件，由于该文件在mac下是隐藏的，所以可以借助命令行来删除：

ls -a 
. 
.eslintrc 
LICENSE.md 
.. 
.npmignore 
README.md 
.babelrc 
.travis.yml 
lib 
.eslintignore 
CODE_OF_CONDUCT.md 
package.json 
rm .babelrc 
ls -a 
. 
.npmignore 
README.md 
.. 
.travis.yml 
lib 
.eslintignore 
CODE_OF_CONDUCT.md 
package.json 
.eslintrc 
LICENSE.md

如果显示无法连接到node服务器，那么请检查plist设置。
问题解决完成之后重启node服务器，重新run一下工程，看到demo页面则表明React-Native集成的现有xCode工程成功。

Demo地址:https://github.com/ilioner/ReactNative-Integrating-with-Existing-Apps