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: 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

 

連接：

iOS原生項目中集成React Native

React-Native入門指南（二）——代碼結構

深刻淺出 React Native：使用 JavaScript 構建原生應用

ReactNative集成到已有工程中-IOS

在現有App項目中使用React-Native(譯)