就现阶段而言 , 完全用ReactNative 构建App 还是不太现实 .
但其替代Web与原生App 进行交互, 还是很令我期待的 .
在网上查到了很多集成的方法 , 在此分享一下集成时遇到的一些坑 .

框架集成

集成方法大致分为以下几种

** 运用CocoaPod 集成 **
** 手动集成框架 **

1. CocoaPod 集成

参考文献: http://blog.csdn.net/l863784757/article/details/50592341

1.1 文件中创建 Podfile 文件

platform :ios, '7.0'

target 'ReactNativeProject' do
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"

end

在终端执行 pod install

几点注意的是

• 目前使用Pod 只能集成React-Native 0.13版本 .
  (版本偏低 , 目前版本都到0.37 , 期待Pod更新新版本)
• 下载架包的时候还是需要翻墙, 否则下载不下来. 而且下载时间也比较长.

1.2 添加头文件搜索路径

添加头文件搜索路径

头文件搜索路径 : $(PODS_ROOT)/React/React

1.3 在工程中 创建index.iOS.js文件

'use strict';  
  
var React = require('react-native');  
var {  
  AppRegistry,  
  StyleSheet,  
  Text,  
  View,  
} = React; 

var ReactNativeProject = 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>  
    );  
  }  
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'antiquewhite',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

因为导入的是0.13 版本框架 , 所以只支持ES5 的写法 , 不支持ES6 .

1.4 在原生代码中添加RCTRootView 页面

- (void)createReactNativeView{

    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    
    RCTRootView *rnView = [[RCTRootView alloc]
                             initWithBundleURL:jsCodeLocation
                             moduleName:@"ReactNativeProject"
                             initialProperties:nil
                             launchOptions:nil];
    
    rnView.frame = CGRectMake(0, 150 , SCREEN_WIDTH , SCREEN_HEIGHT-150);

    [self.view addSubview:rnView];
}

并打开网络请求

打开网络请求

1.5 启动服务器
创建 run.sh 文件

#! /bin/bash
(cd Pods/React; npm run start)

然后给run.sh添加可执行权限：

chmod +x run.sh

启动服务器:

./run.sh

效果图

2. 手动集成框架

参考文献 : https://segmentfault.com/a/1190000004253916

手动集成框架的好处

• 免去翻墙下载的过程, 节省时间.
• 可以直接集成最新的 架包.
• 0.37版本架包下载地址

2.1 将架包导入项目.
将node_modules文件夹放到工程文件夹中
创建Libraries文件夹

项目文件夹

2.2 将.xcodeproj文件 拖拽到工程

.xcodeproj文件

.xcodeproj文件清单
node_modules/react-native/React/React.xcodeproj
node_modules/react-native/Libraries/Image/RCTImage.xcodeproj
node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj
node_modules/react-native/Libraries/Text/RCTText.xcodeproj
node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj
node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj
node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj
node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj
node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj
node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj

2.3 添加 .a 文件

添加 .a 文件

2.4 修改 Build Settings 配置文件

添加头文件搜索路径

头文件搜索路径 : $(SRCROOT)/node_modules/react-native/React

修改Other Linker Flags 配置

添加为 -ObjC

2.5 在工程中 创建index.iOS.js文件

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Text
} from 'react-native';

export default class ReactNativeProject2 extends React.Component{  
  render() {
    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>  
    );  
  }  
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'antiquewhite',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  }
});

AppRegistry.registerComponent('ReactNativeProject2', () => ReactNativeProject2);

因为集成的框架是0.37版本 , 所以只支持ES6 的写法 , 不支持ES5 (很坑)

2.6 在原生代码中添加RCTRootView 页面

- (void)createReactNativeView{
    //RCTBundleURLProvider 是0.29版本新添加的类
    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];;
    
    RCTRootView *rnView = [[RCTRootView alloc]
                             initWithBundleURL:jsCodeLocation
                             moduleName:@"ReactNativeProject2"
                             initialProperties:nil
                             launchOptions:nil];
    
    rnView.frame = CGRectMake(0, 150 , SCREEN_WIDTH , SCREEN_HEIGHT-150);

    [self.view addSubview:rnView];

}

关于RCTBundleURLProvider

并打开网络请求

打开网络请求

至此手动加载框架也大功告成

---

下一篇准备分享 原生App 与 ReactNative的 数据交互
如果感觉还不错 , 点击喜欢鼓励一下哦 👇👇👇👇