ios原生集成React Native

安装react native依赖

本例在工程跟目录下创建了一个ReactComponent文件夹用来存放react native文件。终端进入ReactComponent目录，执行npm install react-native –save安装react native依赖。

通过cocoapods对工程安装React Native

在工程根目录（本例工程名为Integration）中创建Podfile文件，添加如下内容：

# 请将:path后面的内容修改为正确的路径。
pod 'React', :path => ‘./ReactComponent/node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
'RCTActionSheet’,
'RCTGeolocation’,
'RCTSettings’,
'RCTVibration’,
'RCTSettings’,
'RCTLinkingIOS',
#添加其他你想在工程中使用的依赖。
]

PS：根据实际需要添加模块依赖，例如不导入RCTText就无法使用Text组件。然后pod install安装依赖。我在install过程中一开始出现了下面问题：

原因是“撞墙了”，解放方法是将Ruby镜像更换成淘宝的Ruby镜像http://ruby.taobao.org/。

gem sources -l      查看当前Ruby镜像  
gem sources --remove 镜像url  移除当前 
gem sources -a http://ruby.taobao.org/      添加淘宝镜像

更换成淘宝镜像后再执行pod install，发现就能正常安装了。

创建React Native应用

在ReactComponent中创建入口文件index.ios.js。然后在ReactComponent目录下创建index.ios.js文件。文档结构如下：

在index.ios.js添加演示代码

'use strict';  

var React = require('react-native');  
var {  
  AppRegistry,  
  StyleSheet,  
  Text,  
  View,  
} = React;  

var App = React.createClass({  
  render: function() {  
    return (  
      <View style={styles.container}>  
        <Text style={styles.welcome}>  
          Welcome to React Native!  
        </Text>  
        <Text style={styles.instructions}>  
          To get started, edit index.android.js  
        </Text>  
        <Text style={styles.instructions}>  
          Shake or press menu button for dev menu  
        </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('Integration', () =>App);

往原生添加RCTRootView用来显示RN界面

引入RCTRootView文件

#import <RCTRootView.h>

植入RCTRootView

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initRNView];
}

- (void)initRNView{
    NSURL *jsCodeLocation;
    //获取index.ios.bundle的地址。ndex.ios.bundle会由packager服务创建，可以通过React Native服务器访问到
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    //需要注意这里的参数模块名对应index文件中的注册的入口组件名
    RCTRootView *rootView = [[RCTRootView alloc]initWithBundleURL:jsCodeLocation moduleName:@"Integration" initialProperties:nil                          launchOptions:nil];
    //植入到原生
    rootView.frame = CGRectMake(0, 64, 300, 300);
    [self.view addSubview:rootView];
}

启动开发服务器

如果此时直接运行程序，会得到如下报错：

设置允许Http请求。打开info.plist文件，添加

再次运行，报错如下：

很明显，我们还没启动RN服务器。打开终端，在工程根目录中执行

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

注意:JS_DIR变量是查找JS文件的目录，在本例中即为ReactComponent目录；cd后面的路径由实际的文档排版决定，保证进入到react-native（即packager所在的目录）。

好了，启动服务器之后再次运行，完美植入！