1.本文的前提条件是，电脑上已经安装了CocoaPods，React Native相关环境。
2.使用Xcode新建一个工程。EmbedRNMeituan
[图1]
3.使用CocoaPods安装React Native
在工程目录下新建Podfile文件，并配置需要使用的第三方库
pod 'React', '0.13.0-rc'
pod "React/RCTText"
pod "React/RCTActionSheet"
pod "React/RCTGeolocation"
pod "React/RCTImage"
pod "React/RCTLinkingIOS"
pod "React/RCTNetwork"
pod "React/RCTSettings"
pod "React/RCTVibration"
pod "React/RCTWebSocket"
注：如果你需要在React Native中使用<Text>，就需要添加 pod"React/RCTText”，否则不能用
然后安装： pod install
这一步会比较慢
安装完成后，添加 Search Paths
输入$(PODS_ROOT)，选择recursive
【图2】
编译一下，会报一个错，提示路径太长
Argument list too long: recursive header expansion failed at /Users/***/EmbedRNMeituan/Pods/React/node_modules/jest-cli/node_modules/istanbul/node_modules/escodegen/node_modules/estraverse.
这里需要修改刚才的设置，将 $(PODS_ROOT) 改成 $(PODS_ROOT)/React/React
再次编译，成功。
4.在工程目录下新建Components文件夹，和index.ios.js文件
【图3】
并在index.ios.js文件里粘贴一下代码：
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var EmbedRNMeituan = 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: ,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: ,
textAlign: 'center',
margin: ,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: ,
},
});
AppRegistry.registerComponent('EmbedRNMeituan', () => EmbedRNMeituan);
以上，React Native部分已经弄完。下面开始原生部分。
5.新建显示React Native的UIView。
用来加载显示React Native的容器是 RCTRootView，它是继承自UIView。
在ViewController.m中
#import "RCTRootView.h"
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self initRNView];
}
-(void)initRNView {
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"EmbedRNMeituan"
initialProperties:nil
launchOptions:nil];
//注意，这里是 @"EmbedRNMeituan"
rootView.frame = CGRectMake(, , , );
[self.view addSubview:rootView];
}
6.运行
此时如果运行的话，会出现下面的情况
【图4】
提示找不到服务器，以及数据传输的安全问题。
6.1允许http请求
打开info.plist文件，添加
【图5】
App Transport Security Settings -》 Dictionary
Allow Arbitrary Loads -》 YES
6.2启动服务器
工程目录下，终端输入：
(cd Pods/React; npm run start)
6.3编写脚本文件run.sh
vi run.sh
输入
#! /bin/bash
(cd Pods/React; npm run start)
然后给run.sh添加可执行权限：chmod +x run.sh
之后开启服务器时，只需要在终端输入命令： ./run.sh
链接：