iOS原生项目中集成React Native

亲自操作了一遍，没有大问题。

我在 pod install 的时候，一直 installling ，永远安装不完 ，最终发现，我把 翻墙软件退出 去就好了

原文地址：http://blog.csdn.net/l863784757/article/details/50592341

1.本文的前提条件是，电脑上已经安装了CocoaPods，React Native相关环境。

2.使用Xcode新建一个工程。EmbedRNMeituan

[图1]

3.使用CocoaPods安装React Native

在工程目录下新建Podfile文件，并配置需要使用的第三方库

[objc] view plain copy

 

1. pod 'React', '0.13.0-rc'  
2. pod "React/RCTText"  
3. pod "React/RCTActionSheet"  
4. pod "React/RCTGeolocation"  
5. pod "React/RCTImage"  
6. pod "React/RCTLinkingIOS"  
7. pod "React/RCTNetwork"  
8. pod "React/RCTSettings"  
9. pod "React/RCTVibration"  
10. pod "React/RCTWebSocket"  
11. platform :ios, '7.0'  

注：如果你需要在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文件里粘贴一下代码：

[javascript] view plain copy

 

1. 'use strict';  
2.   
3. var React = require('react-native');  
4. var {  
5.   AppRegistry,  
6.   StyleSheet,  
7.   Text,  
8.   View,  
9. } = React;  
10.   
11. var EmbedRNMeituan = React.createClass({  
12.   render: function() {  
13.     return (  
14.       <View style={styles.container}>  
15.         <Text style={styles.welcome}>  
16.           Welcome to React Native!  
17.         </Text>  
18.         <Text style={styles.instructions}>  
19.           To get started, edit index.android.js  
20.         </Text>  
21.         <Text style={styles.instructions}>  
22.           Shake or press menu button for dev menu  
23.         </Text>  
24.       </View>  
25.     );  
26.   }  
27. });  
28.   
29. var styles = StyleSheet.create({  
30.   container: {  
31.     flex: 1,  
32.     justifyContent: 'center',  
33.     alignItems: 'center',  
34.     backgroundColor: '#F5FCFF',  
35.   },  
36.   welcome: {  
37.     fontSize: 20,  
38.     textAlign: 'center',  
39.     margin: 10,  
40.   },  
41.   instructions: {  
42.     textAlign: 'center',  
43.     color: '#333333',  
44.     marginBottom: 5,  
45.   },  
46. });  
47.   
48. AppRegistry.registerComponent('EmbedRNMeituan', () => EmbedRNMeituan);  

以上，React Native部分已经弄完。下面开始原生部分。

5.新建显示React Native的UIView。

用来加载显示React Native的容器是 RCTRootView，它是继承自UIView。

在ViewController.m中

[objc] view plain copy

 

1. #import "RCTRootView.h"  
2.   
3. - (void)viewDidLoad {  
4.     [super viewDidLoad];  
5.     // Do any additional setup after loading the view, typically from a nib.  
6.      
7.     [self initRNView];  
8. }  
9.   
10. -(void)initRNView {  
11.     NSURL *jsCodeLocation;  
12.     jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];     
13.     RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation  
14.                                                         moduleName:@"EmbedRNMeituan"  
15.                                                  initialProperties:nil  
16.                                                      launchOptions:nil];  
17. //注意，这里是 @"EmbedRNMeituan"  
18.           rootView.frame = CGRectMake(0, 64, 300, 300);  
19.     [self.view addSubview:rootView];  
20. }  

6.运行

 此时如果运行的话，会出现下面的情况

【图4】

提示找不到服务器，以及数据传输的安全问题。

6.1允许http请求

打开info.plist文件，添加

【图5】

App Transport Security Settings    -》 Dictionary

          Allow Arbitrary Loads          -》 YES

6.2启动服务器

工程目录下，终端输入：

[html] view plain copy

 

1. (cd Pods/React; npm run start)  

6.3编写脚本文件run.sh

[html] view plain copy

 

1. vi run.sh  

输入

[html] view plain copy

 

1. #! /bin/bash  
2. (cd Pods/React; npm run start)  

然后给run.sh添加可执行权限：chmod +x run.sh

之后开启服务器时，只需要在终端输入命令： ./run.sh