iOS原生项目中集成React Native

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

 

链接：

iOS原生项目中集成React Native

React-Native入门指南（二）——代码结构

深入浅出 React Native：使用 JavaScript 构建原生应用

ReactNative集成到已有工程中-IOS

在现有App项目中使用React-Native(译)