在已有项目中集成ReactNative

由于RN的版本变更很快，建议查看官方的指南 http://facebook.github.io/react-native/docs/integration-with-existing-apps.html

最近在学习ReactNative，文档中都是从头开始的，RN的优点不用多说，NodeJs，热更新等等。如果说用RN重写一个App 可以说这个工程是巨大的。
但是如果要在我们已有的工程中集成，使用RN来编写某个需要经常变更或者更新的功能模块，听上去倒是挺不错的。

React Native

下面就开始吧。

新建或打开一个已有的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模块了。

result

当然，完成一个完整的模块需要解决的问题肯定会有很多，现在只是完成了最简单的部分，接下来要做的还有一些，比如说RN 与Native 代码互相调用、网络通信、热更新等等...

找了两天的房子，不得不吐槽一下北京的房价，租不起了！。

宝宝不说