在許多的項(xiàng)目開發(fā)中哄芜，直接用ReactNative的項(xiàng)目不會很多貌亭，大部分都是原生的代碼中，需要嵌入一兩個界面认臊，運(yùn)用ReactNative圃庭。當(dāng)然也有在ReactNative中跟原生的代碼進(jìn)行交互的情況。
ReactNative中文網(wǎng)中也有相關(guān)的集成說明失晴，但是由于剛學(xué)習(xí)剧腻，對這方面還有些懵，會遇到一些問題涂屁，在這里就可以幫助初學(xué)者更快的跳過這些坑书在。下面我就簡單的說一下將ReactNative項(xiàng)目成功地集成到ios端，并完成所有原生app與javascript交互的功能拆又。
注：本文是在已經(jīng)配置好ReactNative環(huán)境的前提下進(jìn)行的操作儒旬。如果該環(huán)境未配置好，可以參考搭建ReactNative開發(fā)環(huán)境
環(huán)境集成：
一帖族、創(chuàng)建依賴包文件(package.json)
React Native的植入過程同時需要React和React Native兩個node依賴包栈源。我們把具體的依賴包記錄在package.json文件中。
- 如果項(xiàng)目根目錄中沒有這個文件竖般，那就自己創(chuàng)建一個甚垦。
- 如果為了目錄結(jié)構(gòu)的美觀，也可以在根目錄下創(chuàng)建一個文件夾捻激，放置相關(guān)的ReactNative文件制轰。
如果自己創(chuàng)建package.json文件，終端操作
$ cd 需要放置的目錄下（項(xiàng)目的根目錄/項(xiàng)目中自己創(chuàng)建的文件夾）
$ touch package.json
里面的內(nèi)容胞谭，可以參考一下示例垃杖。
記得刪除里面的文字注釋，包括雙斜杠丈屹，否則報錯调俘，這里只是為了說明伶棒。
{
"name": "NumberTileGame",//此處替換你的項(xiàng)目名稱
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.1",// react版本，可以替換成最新的彩库。
"react-native": "0.42.0"http:// 同上肤无，目前最新0.42.0
}
}
如果是從已有的ReactNative中拷貝過來的，修改一下里面的name即可骇钦。
二宛渐、安裝依賴包(node_modules)
使用npm（即node包管理器，Node package manager）來安裝React和React Native模塊眯搭。這些模塊會被安裝到項(xiàng)目根目錄下的node_modules/目錄中窥翩。
- 終端進(jìn)入包含有package.json文件的目錄下，運(yùn)行下列命令來安裝：
$ cd 項(xiàng)目的根目錄/項(xiàng)目中自己創(chuàng)建的文件夾
$ npm install
等待執(zhí)行完畢鳞仙。項(xiàng)目中會多出一個node_modules文件夾寇蚊。
很多同學(xué)在執(zhí)行npm install可能會報各種錯誤，終極解決方案：直接react-native init ~ 產(chǎn)生一個新的工程棍好，拷貝node_modules文件夾即可仗岸。
三、添加React Native框架(Podfile)
在React和React Native模塊成功安裝到node_modules目錄之后借笙，你就可以開始創(chuàng)建Podfile以便選擇所需的組件安裝到應(yīng)用中扒怖。
創(chuàng)建Podfile的最簡單的方式就是在iOS原生代碼所在的目錄中使用CocoaPods的init命令：
## 在iOS原生代碼所在的目錄中（也就是`.xcodeproj`文件所在的目錄）執(zhí)行：
$ cd 項(xiàng)目的根目錄
$ pod init
如果電腦中還沒有配置CocoaPods，可以參考一下這篇文章提澎，更快的配置好最新最詳細(xì)的CocoaPods安裝教程姚垃。
然后再Podfile中添加一下內(nèi)容:
注：編輯Podfile的時候念链，盡量不要用文本編輯器盼忌，可以使用Xcode打開，或者用vim Podfile去編輯掂墓。
# 最低適配的版本
platform :ios, "9.0"
use_frameworks!
# target的名字一般與你的項(xiàng)目名字相同
target 'TestReactNative' do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同谦纱，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
#記得此處的路徑，如果你有創(chuàng)建一個新的文件夾存放這些文件君编，前面要加上你文件夾的名字：'../RNComponent/node_modules/react-native'跨嘉，如果沒有，直接如下創(chuàng)建即可吃嘿。
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的模塊
]
# 如果你的RN版本 >= 0.42.0祠乃，請加入下面這行
# 該版本號是package.json中的“dependencies”字典下面的“react-native”后面對應(yīng)的內(nèi)容
pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga"
end
如果RN版本低于0.42.0，應(yīng)該不會出現(xiàn)以下問題兑燥。
注：錯誤提示 我經(jīng)過嘗試亮瓷，加入* pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga"*這一行之后，會提示失斀低（見下圖）嘱支。
如果出現(xiàn)此問題蚓胸，說明./node_modules/react-native/ReactCommon目錄下沒有yoga文件，因此建議用第二步驟中提示的直接react-native init ~ 產(chǎn)生一個新的工程除师，替換已有的node_modules文件夾沛膳，直接npm install安裝的文件可能不太完整。
替換之后終端中再執(zhí)行一遍pod install汛聚。
創(chuàng)建好了Podfile后锹安，就可以開始安裝React Native的pod包了。
$ cd 項(xiàng)目的根目錄
$ pod install
四倚舀、代碼集成(index.ios.js文件創(chuàng)建)
現(xiàn)在我們已經(jīng)準(zhǔn)備好了所有依賴八毯，可以開始著手修改原生代碼來把React Native真正植入到應(yīng)用中了。
- 首先創(chuàng)建一個空的index.ios.js文件瞄桨。一般來說我們把它放置在同上面的package.json的同級目錄下话速。
$ cd 項(xiàng)目的根目錄/項(xiàng)目中自己創(chuàng)建的文件夾
$ touch index.ios.js
- 在index.ios.js中添加你自己的組件。這里我們只是簡單的添加一個<Text>組件芯侥，然后用一個帶有樣式的<View>組件把它包起來泊交。
- 在index.ios.js中實(shí)現(xiàn)跨平臺代碼：
例如：
'use strict';
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class RNHighScores extends React.Component {
render() {
var contents = this.props["scores"].map(
score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
);
return (
<View style={styles.container}>
<Text style={styles.highScoresTitle}>
2048 High Scores!
</Text>
<Text style={styles.scores}>
{contents}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
// 整體js模塊的名稱
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
五、iOS項(xiàng)目中進(jìn)行初始化配置
進(jìn)到iOS項(xiàng)目工程中柱查，并進(jìn)行初始化配置：
- 首先導(dǎo)入RCTRootView.h頭文件
// #import "RCTRootView.h"廓俭，更新之后，需要導(dǎo)入下面的頭文件唉工。
// 官網(wǎng)的評論下方也有說明研乒，否則會提示RCTRootView.h文件不存在。
#import <React/RCTRootView.h>
- viewDidload中加入代碼
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"RNHighScores"
initialProperties :
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
}
]
}
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
六淋硝、啟動開發(fā)服務(wù)器雹熬，運(yùn)行Packager
# 進(jìn)入到node_modules文件夾所在的路徑
$ cd 項(xiàng)目的根目錄/項(xiàng)目中自己創(chuàng)建的文件夾
$ npm start
注意：直接運(yùn)行項(xiàng)目會報Could not connect to development server錯誤，需要在項(xiàng)目中配置App Transport Security谣膳。(相信這個大家都會的啦(≧▽≦)/)
在info.plist中添加
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
七竿报、在Xcode中運(yùn)行項(xiàng)目
至此就已經(jīng)完成的項(xiàng)目的配置啦，大家可以在Xcode中運(yùn)行項(xiàng)目了继谚，并且在webStorm或者你喜歡的工具中編輯index.ios.js進(jìn)行開發(fā)啦烈菌！
如果有問題，歡迎大家斧正~
我的Demo地址是TestReactNative
