使用cocoapods集成react-native到現(xiàn)有原生項(xiàng)目
一喷市、可參考react-native官網(wǎng)：http://reactnative.cn/docs/0.49/integration-with-existing-apps.html#content
二滑进、集成步驟：
設(shè)置項(xiàng)目目錄結(jié)構(gòu)
1抖拴、起初新建一個(gè)空的目錄用于存放react-native項(xiàng)目（建議使用終端）够庙，在桌面新建空文件RN_Peter，然后在這個(gè)文件夾下新建一個(gè)子/ios子目錄,把現(xiàn)有的項(xiàng)目拷貝到/ios子目錄中,如圖1所示：
安裝JavaScript依賴包
2践盼、在項(xiàng)目的根目錄下創(chuàng)建一個(gè)名為package.json的空文本文件思瘟，然后填入一下內(nèi)容：
此時(shí)环础，應(yīng)該檢查下react版本(npm info react-native)，react-native對(duì)react的版本有嚴(yán)格要求剩拢，高于或低于某個(gè)范圍都不可以线得；
{
"name":"RN_Peter_Test",
"version":"0.0.1",
"private":true,
"scripts": {
"start":"node node_modules/react-native/local-cli/cli.js
start"
},
"dependencies": {
"react":"16.0.0-beta.5",
"react-native":"0.49.3"
}
}
版本如圖：
3、接下來使用npm（node包管理器）來安裝React和React-Native模塊徐伐，請打開終端/命令提示行贯钩，進(jìn)入項(xiàng)目目錄中（既包含package.json文件的目錄）,然后運(yùn)行下列命令來安裝：
安裝CocoaPods
4、然后就是安裝cocoapods了办素，可參考
把React Native添加到你的應(yīng)用中
配置CocoaPods的依賴
5角雷、現(xiàn)在就是需要在cocoapods的Podfile中指定我們所需要私用的組件，在創(chuàng)建Podfiel文件的時(shí)候性穿，需要指定具體安裝哪些react-native的依賴庫勺三，所指定的每一個(gè)庫就成為一個(gè)subspec，可用的subspec都列在node_module/react-native/React.podspec中需曾。一般來說都是首先需要添加Core吗坚，這一subspec包含了必須的AppRegistry、StyleSheet胯舷、View以及其他的一些React Native核心庫刻蚯。如果你想使用React Native的Text庫（即組件），那就需要添加RCTText的subspec桑嘶。同理炊汹，Image需要加入RCTImage，等等逃顶。
我們需要在Podfile文件中指定所需的subspec讨便。創(chuàng)建Podfile的最簡單的方式就是在/ios子目錄中使用CocoaPods的init命令：
在使用pod init時(shí)會(huì)遇到如下問題：
我們需要這樣去做：
然后Podfile文件就創(chuàng)建成功了；
Podfile會(huì)創(chuàng)建在執(zhí)行命令的目錄中以政。你需要調(diào)整其內(nèi)容以滿足你的集成需求霸褒。調(diào)整后的Podfile的內(nèi)容看起來類似下面這樣(復(fù)制時(shí)去掉注釋)：
# 'node_modules'目錄一般位于根目錄中
#但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod 'React', :path => 'RN_Peter_Test/node_modules/react-native',:subspecs => [
'Core',
'DevSupport', #如果RN版本>= 0.43盈蛮，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket',
‘BatchedBridge’#這個(gè)模塊是用于調(diào)試功能的
#在這里繼續(xù)添加你所需要的模塊
]
#如果你的RN版本>= 0.42.0废菱，則加入下面這行
pod“yoga", :path=> "RN_Peter_Test/node_modules/react-native/ReactCommon/yoga"
end
‘BatchedBridge’#記得不要忘記這個(gè)模塊，不然項(xiàng)目運(yùn)行起來會(huì)報(bào)錯(cuò),可參考
注意：”Yoga”這里不知為何抖誉，如果Y大寫殊轴，會(huì)報(bào)錯(cuò)，改成’yoga’即可
創(chuàng)建好了Podfile后袒炉，pod install就可以開始安裝React Native的pod包了旁理。
代碼集成
6、接下來就是項(xiàng)目代碼的集成工作我磁，首先在項(xiàng)目根目錄下創(chuàng)建一個(gè)空的index.js文件孽文。（注意在0.49版本之前是index.ios.js文件）,如圖：
7驻襟、在index.js中添加你自己的組件。這里我們只是簡單的添加一個(gè)組件芋哭，然后用一個(gè)帶有樣式的組件把它包起來沉衣，復(fù)制如下代碼到index.js中：
importReactfrom'react';
import{
AppRegistry,
StyleSheet,
Text,
View
}from'react-native';
classRNHighScoresextendsReact.Component{
render() {
varcontents =this.props["scores"].map(
score =>{score.name}:{score.value}{"\n"}
);
return (
2048 HighScores!
{contents}
);
}
}
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('MyReactNativeApp',
() => RNHighScores);
MyReactNativeApp是整體js模塊（即你所有的js代碼）的名稱。你在iOS原生代碼中添加React Native視圖時(shí)會(huì)用到這個(gè)名稱楷掉。
掌握核心科技：RCTRootView
8厢蒜、打開ios工程，如圖：
效果如下：
運(yùn)行Packager
要運(yùn)行應(yīng)用烹植，首先需要啟動(dòng)開發(fā)服務(wù)器（即Packager斑鸦，它負(fù)責(zé)實(shí)時(shí)監(jiān)測js文件的變動(dòng)并實(shí)時(shí)打包，輸出給客戶端運(yùn)行）草雕。具體只需簡單進(jìn)入到項(xiàng)目根目錄中巷屿，然后運(yùn)行：npmstartPackager只是在開發(fā)時(shí)需要，便于你快速開發(fā)迭代墩虹。在正式發(fā)布應(yīng)用時(shí)嘱巾，所有的js文件都會(huì)被打包為一整個(gè)jsbundle文件離線運(yùn)行，此時(shí)客戶端不再需要Packager服務(wù)诫钓。
運(yùn)行應(yīng)用
如果你使用的是Xcode旬昭，那么照常編譯和運(yùn)行應(yīng)用即可。如果你沒有使用Xcode（但是你仍然必須安裝Xcode）菌湃，則可以在命令行中使用以下命令來運(yùn)行應(yīng)用：
在項(xiàng)目的根目錄中執(zhí)行：
$ react-native run-ios
如果項(xiàng)目運(yùn)行不起來问拘，試試適配ios9網(wǎng)絡(luò)訪問：
在項(xiàng)目info中添加
NSAppTransportSecurity
NSTemporaryExceptionAllowsInsecureHTTPLoads
到此為止，我們集成完畢惧所，大家不妨自己動(dòng)手也嘗試一下骤坐。。下愈。
