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