使用cocoapods集成react-native到現有原生項目
一、可參考react-native官網：http://reactnative.cn/docs/0.49/integration-with-existing-apps.html#content
二、集成步驟：
設置項目目錄結構
1、起初新建一個空的目錄用于存放react-native項目（建議使用終端），在桌面新建空文件RN_Peter，然后在這個文件夾下新建一個子/ios子目錄,把現有的項目拷貝到/ios子目錄中,如圖1所示：
安裝JavaScript依賴包
2、在項目的根目錄下創建一個名為package.json的空文本文件，然后填入一下內容：
此時，應該檢查下react版本(npm info react-native)，react-native對react的版本有嚴格要求，高于或低于某個范圍都不可以；
{
"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模塊，請打開終端/命令提示行，進入項目目錄中（既包含package.json文件的目錄）,然后運行下列命令來安裝：
安裝CocoaPods
4、然后就是安裝cocoapods了，可參考
把React Native添加到你的應用中
配置CocoaPods的依賴
5、現在就是需要在cocoapods的Podfile中指定我們所需要私用的組件，在創建Podfiel文件的時候，需要指定具體安裝哪些react-native的依賴庫，所指定的每一個庫就成為一個subspec，可用的subspec都列在node_module/react-native/React.podspec中。一般來說都是首先需要添加Core，這一subspec包含了必須的AppRegistry、StyleSheet、View以及其他的一些React Native核心庫。如果你想使用React Native的Text庫（即組件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。
我們需要在Podfile文件中指定所需的subspec。創建Podfile的最簡單的方式就是在/ios子目錄中使用CocoaPods的init命令：
在使用pod init時會遇到如下問題：
我們需要這樣去做：
然后Podfile文件就創建成功了；
Podfile會創建在執行命令的目錄中。你需要調整其內容以滿足你的集成需求。調整后的Podfile的內容看起來類似下面這樣(復制時去掉注釋)：
# 'node_modules'目錄一般位于根目錄中
#但是如果你的結構不同，那你就要根據實際路徑修改下面的`:path`
pod 'React', :path => 'RN_Peter_Test/node_modules/react-native',:subspecs => [
'Core',
'DevSupport', #如果RN版本>= 0.43，則需要加入此行才能開啟開發者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket',
‘BatchedBridge’#這個模塊是用于調試功能的
#在這里繼續添加你所需要的模塊
]
#如果你的RN版本>= 0.42.0，則加入下面這行
pod“yoga", :path=> "RN_Peter_Test/node_modules/react-native/ReactCommon/yoga"
end
‘BatchedBridge’#記得不要忘記這個模塊，不然項目運行起來會報錯,可參考
注意：”Yoga”這里不知為何，如果Y大寫，會報錯，改成’yoga’即可
創建好了Podfile后，pod install就可以開始安裝React Native的pod包了。
代碼集成
6、接下來就是項目代碼的集成工作，首先在項目根目錄下創建一個空的index.js文件。（注意在0.49版本之前是index.ios.js文件）,如圖：
7、在index.js中添加你自己的組件。這里我們只是簡單的添加一個組件，然后用一個帶有樣式的組件把它包起來，復制如下代碼到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視圖時會用到這個名稱。
掌握核心科技：RCTRootView
8、打開ios工程，如圖：
效果如下：
運行Packager
要運行應用，首先需要啟動開發服務器（即Packager，它負責實時監測js文件的變動并實時打包，輸出給客戶端運行）。具體只需簡單進入到項目根目錄中，然后運行：npmstartPackager只是在開發時需要，便于你快速開發迭代。在正式發布應用時，所有的js文件都會被打包為一整個jsbundle文件離線運行，此時客戶端不再需要Packager服務。
運行應用
如果你使用的是Xcode，那么照常編譯和運行應用即可。如果你沒有使用Xcode（但是你仍然必須安裝Xcode），則可以在命令行中使用以下命令來運行應用：
在項目的根目錄中執行：
$ react-native run-ios
如果項目運行不起來，試試適配ios9網絡訪問：
在項目info中添加
NSAppTransportSecurity
NSTemporaryExceptionAllowsInsecureHTTPLoads
到此為止，我們集成完畢，大家不妨自己動手也嘗試一下。。。
