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文件，並配置需要使用的第三方庫

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'

注：如果你需要在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: 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.運行

 此時如果運行的話，會出現下面的情況

【圖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