React Native開發(fā)環(huán)境的配置

1.安裝Homebrew:

在MAC中打開終端工具并輸入如下語句:

ruby -e "$(curl --insecure -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
homebrew.png

上述步驟中會(huì)提示輸入密碼然后開始下載Homebrew,如果此時(shí)網(wǎng)速不穩(wěn)定可能會(huì)出現(xiàn)錯(cuò)誤提示:curl: (35) Server aborted the SSL handshake。

此時(shí)需要執(zhí)行卸載操作,輸入如下命令進(jìn)行卸載:

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

卸載完成后再次嘗試安裝。

安裝完成會(huì)有以下提示:

homebrew下載完成.png

2.安裝npm和Node.js

brew install node

3.安裝WatchMan
該插件用于監(jiān)控bug文件和文件變化 ,并且可以觸發(fā)指定的操作

執(zhí)行安裝

brew install watchman
watchman.png

ps:在Mac OS X 10.11(El Capitan)版本中,homebrew在安裝軟件時(shí)可能會(huì)碰到/usr/local目錄不可寫的權(quán)限問題。可以使用下面的命令修復(fù):

sudo chown -R `whoami` /usr/local

4.安裝Flow
flow是一個(gè) JavaScript 的靜態(tài)類型檢查器,安裝后,方便找出代碼中可能存在的類型錯(cuò)誤

執(zhí)行安裝

brew install flow
flow.png

更新

如果已經(jīng)安轉(zhuǎn)了以上的軟件,需要更新到當(dāng)前最新版本。
首先更新Homebrew的版本庫(kù):

 brew update

更新Homebrew庫(kù)的內(nèi)容:

brew  upgrade

清除不再使用的資源:

brew cleanup

React Native安裝

安裝React Native:

npm install -g react-native-cli

ps:如果提示root權(quán)限不夠

sudo npm install -g react-native-cli
React Native安裝.png

安裝成功

創(chuàng)建新項(xiàng)目

react-native init 項(xiàng)目名稱

react-native init 項(xiàng)目名稱 --version 0.40.0   //創(chuàng)建一個(gè)指定版本為0.40.0版本的項(xiàng)目

ps:由于網(wǎng)絡(luò)原因,需要等待一段時(shí)間。react-native命令行從官方npm獲取代碼會(huì)很慢,可以將npm倉(cāng)庫(kù)源替換為國(guó)內(nèi)鏡像:

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

接下來,運(yùn)行項(xiàng)目

運(yùn)行iOS:

react-native run-ios

運(yùn)行Android:

react-native run-android

ps:一些相關(guān)查詢

查看本地的React Native的版本

react-native --version

更新本地的React Native的版本

npm update -g react-native-cli

查詢r(jià)eact-native的npm包最新版本

npm info react-native

升級(jí)或者降級(jí)npm包的版本

npm install --save react-native@0.18

更新項(xiàng)目templates文件(可選)

react-native upgrade

運(yùn)行項(xiàng)目:

運(yùn)行.png

ps:如果終端提示

node_modules錯(cuò)誤.png

transforming [========================================] 100% 406/407Error while persisting cache: TransformError: /Users/maying/WorkSpace/ReactNative/HelloWork/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/maying/WorkSpace/ReactNative/HelloWork/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/maying/WorkSpace/ReactNative/HelloWork/node_modules/react-deep-force-update/.babelrc.stage

是因?yàn)镽eact Native升級(jí)了babel6,babel6對(duì)babelrc文件的解析有變更,而其他第三方組件還沒有跟上這個(gè)變化。提示的很清晰,刪除文件即可,刪除react-deep-force-update/.babelrc。

解決辦法:
cd到文件夾下ls -a然后rm即可,然后重啟即可。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容