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

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

iOS原生项目中集成React Native

[图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

 

iOS原生项目中集成React Native

【图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文件

iOS原生项目中集成React Native

【图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: 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中
#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.运行
 此时如果运行的话,会出现下面的情况

 

iOS原生项目中集成React Native

【图4】

 

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

 

6.1允许http请求
打开info.plist文件,添加

iOS原生项目中集成React Native

【图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
 
链接:

分类:

技术点:

相关文章: