react-native項(xiàng)目集成到現(xiàn)有原生項(xiàng)目

使用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所示:

image

安裝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"
}
}

版本如圖:

image

3、接下來使用npm(node包管理器)來安裝React和React-Native模塊徐伐,請打開終端/命令提示行贯钩,進(jìn)入項(xiàng)目目錄中(既包含package.json文件的目錄),然后運(yùn)行下列命令來安裝:

image

安裝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ì)遇到如下問題:

image

我們需要這樣去做:

image

然后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文件),如圖:

image

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工程,如圖:

image

效果如下:

image

運(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
image

如果項(xiàng)目運(yùn)行不起來问拘,試試適配ios9網(wǎng)絡(luò)訪問:

image

在項(xiàng)目info中添加

image
NSAppTransportSecurity
NSTemporaryExceptionAllowsInsecureHTTPLoads
image

到此為止,我們集成完畢惧所,大家不妨自己動(dòng)手也嘗試一下骤坐。。下愈。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末纽绍,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子势似,更是在濱河造成了極大的恐慌拌夏,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,464評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件履因,死亡現(xiàn)場離奇詭異辖佣,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)搓逾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來杯拐,“玉大人霞篡,你說我怎么就攤上這事世蔗。” “怎么了朗兵?”我有些...
    開封第一講書人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵污淋,是天一觀的道長。 經(jīng)常有香客問我余掖,道長寸爆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,979評(píng)論 1 299
  • 正文 為了忘掉前任盐欺,我火速辦了婚禮赁豆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘冗美。我一直安慰自己魔种,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評(píng)論 6 398
  • 文/花漫 我一把揭開白布粉洼。 她就那樣靜靜地躺著节预,像睡著了一般。 火紅的嫁衣襯著肌膚如雪属韧。 梳的紋絲不亂的頭發(fā)上安拟,一...
    開封第一講書人閱讀 52,584評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音宵喂,去河邊找鬼糠赦。 笑死,一個(gè)胖子當(dāng)著我的面吹牛樊破,可吹牛的內(nèi)容都是我干的愉棱。 我是一名探鬼主播,決...
    沈念sama閱讀 41,085評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼哲戚,長吁一口氣:“原來是場噩夢啊……” “哼奔滑!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起顺少,我...
    開封第一講書人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤朋其,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后脆炎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體梅猿,經(jīng)...
    沈念sama閱讀 46,555評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評(píng)論 3 342
  • 正文 我和宋清朗相戀三年秒裕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了袱蚓。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,769評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡几蜻,死狀恐怖喇潘,靈堂內(nèi)的尸體忽然破棺而出体斩,到底是詐尸還是另有隱情,我是刑警寧澤颖低,帶...
    沈念sama閱讀 36,439評(píng)論 5 351
  • 正文 年R本政府宣布絮吵,位于F島的核電站,受9級(jí)特大地震影響忱屑,放射性物質(zhì)發(fā)生泄漏蹬敲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評(píng)論 3 335
  • 文/蒙蒙 一莺戒、第九天 我趴在偏房一處隱蔽的房頂上張望伴嗡。 院中可真熱鬧,春花似錦脏毯、人聲如沸闹究。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽渣淤。三九已至,卻和暖如春吉嫩,著一層夾襖步出監(jiān)牢的瞬間价认,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來泰國打工自娩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留用踩,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓忙迁,卻偏偏與公主長得像脐彩,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子姊扔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361