由于RN的版本变更很快，建议查看官方的指南 http://facebook.github.io/react-native/docs/integration-with-existing-apps.html
最近在学习ReactNative，文档中都是从头开始的，RN的优点不用多说，NodeJs，热更新等等。如果说用RN重写一个App 可以说这个工程是巨大的。
但是如果要在我们已有的工程中集成，使用RN来编写某个需要经常变更或者更新的功能模块，听上去倒是挺不错的。
下面就开始吧。
新建或打开一个已有的Xcode项目
新建一个Xcode工程当做是一个已有的项目
使用CocoaPods
在项目根目录创建或者修改Podfile 文件添加ReactNative 主要 依赖库，其中必须添加的是 React 和 React/RCTWebSocket，这里ReactNative可以根据你的需求来在Pod中添加需要的组件库来减少App的体积。
use_frameworks!
target 'RNTest' do
pod 'React'
pod 'React/RCTText'
pod 'React/RCTWebSocket'
end
新建或修改完成之后，执行安装
$ pod install
编写ReactNative 模块
在根目录创建一个 index.ios.js 文件作为ReactNative模块主文件，可以在此基础上添加扩展更多功能。
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var RNTestComponent = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
巴拉巴拉巴拉 碧池
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('RNTestComponent', () => RNTestComponent);
在Swift代码中使用 RN模块
然后我们需要在native代码中使用ReactNative所编写的模块。
import UIKit
import React
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let url = NSURL(string: "http://localhost:8081/index.ios.bundle?platform=ios&dev=true")
let rctView = RCTRootView(bundleURL: url, moduleName: "RNTestComponent", initialProperties: nil, launchOptions: nil)
rctView.frame = CGRect(x: 0, y: 20, width: self.view.frame.width, height: self.view.frame.height)
self.view.addSubview(rctView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
启动/运行
在执行 pod install 之后会在Pods/React目录中生成 Nodejs 的配置文件 package.json 并且会自动下载所依赖的 node_modules，所以只需要在文件夹目录执行命令即可启动ReactNative服务，当然你也可以把启动命令交给Xcode 的run Script 处理，在App 启动时会自动启动Nodejs服务。
$ npm start
然后运行Xcode工程就可看到你编写的ReactNative模块了。
当然，完成一个完整的模块需要解决的问题肯定会有很多，现在只是完成了最简单的部分，接下来要做的还有一些，比如说RN 与Native 代码互相调用、网络通信、热更新等等...
找了两天的房子，不得不吐槽一下北京的房价，租不起了！。
