本篇文章將帶領大家把React Native 集成到iOS Native 項目中，實現OC和React Native的混合開發
一、準備工作：
搭建React Native 開發環境，還沒有搭建好的同學，可以參照React Native 中文網進行搭建，里面的文檔已經很明了了。
本次我們還需要cocoapods ，ios的三方庫管理工具，用于把React Native framework 導入到ios Native 項目中
tips:還沒有安裝cocoapods的百度上有很多安裝的教程，這里不再敘述
二、開始集成React Native
1）首先新建一個ios Obj-c Native 工程，在這里我們取名為OCToRNTestDemo?
2）我們在工程根目錄下創建一個文件夾，用于存放React Native 模塊，這個文件夾可以自己取名（在這里我們取名為RNComponent）如圖：
3）在RNComponent這個文件夾內，我們創建一個package.json的文件，用于初始化React Native 。 注意這個package.json文件名字是固定的。
4）然后我們在這個package.json文件內指定react native 的版本號等信息，如圖:
我們需把第一行的name 改為本工程的名字(OCToRNTestDemo)
tips:我們可以先init[react-native init RNTextdemo]一個RN的項目,然后把這個項目中的package.json文件給復制到RNComponent這個文件夾內。
- 下面我們用npm install 操作安裝React Native模塊
打開命令終端 cd 到RNComponent文件夾下
輸入命令: npm install
安裝完成之后，接下來我們用cocopods關聯React Native依賴。
- cd 到ios工程根目錄下 ，
輸入：pod init
然后：vim podfile
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'OCToRNTestDemo' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
pod 'Yoga', :path=> './RNComponent/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => ‘./RNComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS'
]
# Pods for OCToRNTestDemo
target 'OCToRNTestDemoTests' do
inherit! :search_paths
# Pods for testing
end
target 'OCToRNTestDemoUITests' do
inherit! :search_paths
# Pods for testing
end
end
tips:
- path 中的RNComponent改為剛剛你自己在工程根目錄下建的文件夾名字
- pod 'Yoga' 這行代碼如果不指定yoga，在pod install 時可能會報找不到yoga的錯誤
3.數組中的pod 'React', :path => ‘./RNComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS'
] 視你需要用到的庫，如果不需要則可以刪除
修改好podfile文件后運行：pod install
這樣便添加好了依賴
7） 在RNComponent 添加index.ios.js 的RN入口文件
文件代碼：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
class NativeRNApp extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
renderItem={({item})=>{
return <Text style={{paddingTop:30,fontSize:30}}>{item.key}</Text>
}}
data={[{key:'a'},{key:'b'}]}
/>
</View>
);
}
}
const 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('OCToRNTestDemo', () => NativeRNApp);
8）在ios工程中，我們需要修改info.plist文件，讀取本地的npm 服務器
添加如下代碼到info.plist文件中
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
9）在ViewController中導入RCTRootView
#import <React/RCTRootView.h>
在viewDidload方法中，我們把rootView初始化出來，添加到ViewController的view上
- (void)viewDidLoad {
[super viewDidLoad];
NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"OCToRNTestDemo" initialProperties:nil launchOptions:nil];
[self.view addSubview:rootView];
rootView.frame = CGRectMake(0, 0, 300, 300);
rootView.center = self.view.center;
}
里面的moduleName為該項目的名字
10）最后運行該項目
首先 cd 到RNComponent 文件夾下，輸入：npm start 開啟package
開啟之后運行該ios項目，自此，已經把React Native 集成到了iOS原生項目中
