iOS原生项目中集成React Native

 

 

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

 

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

 

 

3.使用CocoaPods安装React Native

 

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

 

[objc] view plain copy

 

 

1.  

 

注：如果你需要在React Native中使用<Text>，就需要添加   pod"React/RCTText”，否则不能用

 

然后安装：  pod install

 

这一步会比较慢

 

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"  
platform :ios, '7.0'  

 

 

 

安装完成后，添加 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文件

 

 

并在index.ios.js文件里粘贴一下代码：

 

[javascript] view plain copy

 

 

1. '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: 1,  
       justifyContent: 'center',  
       alignItems: 'center',  
       backgroundColor: '#F5FCFF',  
     },  
     welcome: {  
       fontSize: 20,  
       textAlign: 'center',  
       margin: 10,  
     },  
     instructions: {  
       textAlign: 'center',  
       color: '#333333',  
       marginBottom: 5,  
     },  
   });  
     
   AppRegistry.registerComponent('EmbedRNMeituan', () => EmbedRNMeituan);  
    

    

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

 

 

 

5.新建显示React Native的UIView。

 

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

 

在ViewController.m中

 

 

 

[objc] view plain copy

 

 

1. #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(0, 64, 300, 300);  
       [self.view addSubview:rootView];  
   }  
    
   
    

    

 

 

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  
   (cd Pods/React; npm run start)  

    

 

 

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

 

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