React Native項目搭建和使用

??1.工具的下載與安裝
??此文章記錄問mac版本的工具安裝和使用厕隧,rn起初就是為蘋果量身定制的,后來兼容了windows開發(fā)環(huán)境俄周,個人感覺用mac開發(fā)前端以及rn更加快捷方便吁讨、并且順手。
??首先按照官網(wǎng)內(nèi)容進(jìn)行一步一步的安裝峦朗,剛接觸rn的時候建丧,自己是小白,按照官網(wǎng)做也會遇到各種問題波势,也是到google翎朱、百度等搜索如何解決問題,下面我也會記錄到中間遇到的問題,同時也會以當(dāng)前最新的版本進(jìn)行安裝調(diào)試
??干凈的macOs從頭安裝開發(fā)軟件艰亮,
??1)首先安裝Xcode闭翩。
????直接在appstore下載即可。
??2)安裝Homebrew迄埃。

??首先打開terminal疗韵,然后輸入

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

??在輸入此命令后,可能會報(Failed to connect to raw.githubusercontent.com port 443: Connection refused)錯誤侄非,這個原因:由于某些你懂的因素蕉汪,導(dǎo)致GitHub的raw.githubusercontent.com域名解析被污染了流译。
??解決辦法就是通過修改hosts來解決此問題。
??首先查詢真實IP
????在https://www.ipaddress.com/查詢raw.githubusercontent.com的真實IP者疤。如下圖所示:

圖1.網(wǎng)址信息

??修改hosts
????添加如下內(nèi)容(具體vi及修改文件命令百度谷歌自尋):

199.232.28.133 raw.githubusercontent.com
image.png

??安裝如果還出現(xiàn)超時錯誤如下福澡,那就要考慮好好學(xué)習(xí)科學(xué)上網(wǎng)了:
????Failed to connect to raw.githubusercontent.com port 443:time out
??安裝過程中若報以下錯誤:
????RPC failed; curl 18 transfer closed with outstanding read data remaining
??原因是在使用git bash下載超大資源,輸入以下命令:

git config --global http.postBuffer 542428800

??如果沒有報錯驹马,就 等待安裝就可以來革砸,時間可能會稍微長,見到Installation successful!就說明安裝成功糯累,運行brew出現(xiàn)介紹信息即可算利。
??3)安裝node,運行以下命令

brew install node

??4)安裝watchman,運行以下命令

brew install watchman

??5)為加速后期下載速度泳姐,使用淘寶鏡像源效拭,有科學(xué)上網(wǎng)工具也可以不用切換

npx nrm use taobao。

注意:在網(wǎng)上總能搜索到cnpm命令操作的胖秒,不要使用cnpm命令缎患,此命令生成的目錄packager無法識別。
??6)安裝yarn阎肝,使用它代替npm 可以加速下載挤渔,運行命令:

npm install -g yarn

??7)安裝CocoaPods包管理工具,運行命令:

sudo gem install cocoapods

??8)創(chuàng)建一個新的項目工程风题。注意(在rn 0.60后有大的改變蚂蕴,使用到了cocoapods這樣能更好的集成原生功能,但是0.60之前如果安裝過react-native-cli俯邓,請移除掉,以減少命令互相干擾熔号。若你的項目是0.60之前請忽略)稽鞭。運行命令以下創(chuàng)建新項目(0.60以下用的react-native-cli命令行工具,命令為react-native init xxx)引镊。

npx react-native init XXX 

??2.RN的使用 -- 添加第三方包(如果不想讀廢話的話朦蕴,直接看代碼命令即可。)
??簡單使用請參照官網(wǎng)的api介紹即可弟头。但是值得一提的是吩抓,0.60以后的版本更好融入了原生接入入口,增加了cocoapods和npx赴恨,相信做原生開發(fā)的人都知道疹娶,是對項目的包管理器。有了這兩個以后伦连,可以更好的將現(xiàn)有的原生工程融入到新的React Native項目中雨饺,也可以反過來說钳垮,可以讓現(xiàn)有的React Native項目融入到新的原生項目中。比如额港,現(xiàn)在要加入一個帶原生依賴的庫 react-native-webview饺窿,這是第三方的webview功能的包,那么我們只需要運行命令(1)

yarn add react-native-webview

將外部包下載到我們的工程中 (2) 進(jìn)入\color{red}{項目根目錄/ios 目錄下}移斩,執(zhí)行

pod install

或者直接使用npx命令,不需要進(jìn)入ios目錄下肚医。

npx pod-install

0.61版本后增加來npx的使用,更方便開發(fā)者向瓷。npx是npm 5.2以后出現(xiàn)的命令肠套,pod-install命令介紹如下:

image.png

這命令可以應(yīng)用到任何帶有cocoapods的ios項目工程中,Ionic 和 Flutter也可以风罩。
用它的好處就像官方給出的說法:
image.png

??它的好處就是在運行此命令后糠排,它會自動去檢查是否安裝cocopods cli命令工具,如果沒安裝超升,它會自動按照gem 入宦、homebrew順序去安裝,然后去檢查是否在ios/目錄下室琢,執(zhí)行pod install命令乾闰。具體想更了解npx,可點擊查看其他小伙伴對它的解析盈滴。
??這樣就ok了涯肩,官網(wǎng)上面文檔說明目前沒有更改過來,不再需要像以前l(fā)ink操作巢钓,自動添加完畢病苗。安卓也一樣,直接yarn add 之后症汹,自動引入包到項目中硫朦。
??自此項目就全部搭建完成!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末背镇,一起剝皮案震驚了整個濱河市咬展,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌瞒斩,老刑警劉巖破婆,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異胸囱,居然都是意外死亡祷舀,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蔑鹦,“玉大人夺克,你說我怎么就攤上這事『啃啵” “怎么了铺纽?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長哟忍。 經(jīng)常有香客問我狡门,道長,這世上最難降的妖魔是什么锅很? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任其馏,我火速辦了婚禮,結(jié)果婚禮上爆安,老公的妹妹穿的比我還像新娘叛复。我一直安慰自己,他們只是感情好扔仓,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布褐奥。 她就那樣靜靜地躺著,像睡著了一般翘簇。 火紅的嫁衣襯著肌膚如雪撬码。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天版保,我揣著相機與錄音呜笑,去河邊找鬼。 笑死彻犁,一個胖子當(dāng)著我的面吹牛叫胁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播汞幢,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼曹抬,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了急鳄?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤堰酿,失蹤者是張志新(化名)和其女友劉穎疾宏,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體触创,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡坎藐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片岩馍。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡碉咆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蛀恩,到底是詐尸還是另有隱情疫铜,我是刑警寧澤,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布双谆,位于F島的核電站壳咕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏顽馋。R本人自食惡果不足惜谓厘,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望寸谜。 院中可真熱鬧竟稳,春花似錦、人聲如沸熊痴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽愁拭。三九已至讲逛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間岭埠,已是汗流浹背盏混。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留惜论,地道東北人许赃。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像馆类,于是被迫代替她去往敵國和親混聊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355