使用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)手也嘗試一下骤坐。。下愈。