??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者疤。如下圖所示:
??修改hosts
????添加如下內(nèi)容(具體vi及修改文件命令百度谷歌自尋):
199.232.28.133 raw.githubusercontent.com
??安裝如果還出現(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)入移斩,執(zhí)行
pod install
或者直接使用npx命令,不需要進(jìn)入ios目錄下肚医。
npx pod-install
0.61版本后增加來npx的使用,更方便開發(fā)者向瓷。npx是npm 5.2以后出現(xiàn)的命令肠套,pod-install命令介紹如下:
這命令可以應(yīng)用到任何帶有cocoapods的ios項目工程中,Ionic 和 Flutter也可以风罩。
用它的好處就像官方給出的說法:
??它的好處就是在運行此命令后糠排,它會自動去檢查是否安裝cocopods cli命令工具,如果沒安裝超升,它會自動按照gem 入宦、homebrew順序去安裝,然后去檢查是否在ios/目錄下室琢,執(zhí)行pod install命令乾闰。具體想更了解npx,可點擊查看其他小伙伴對它的解析盈滴。
??這樣就ok了涯肩,官網(wǎng)上面文檔說明目前沒有更改過來,不再需要像以前l(fā)ink操作巢钓,自動添加完畢病苗。安卓也一樣,直接yarn add 之后症汹,自動引入包到項目中硫朦。
??自此項目就全部搭建完成!