1. 程式人生 > >React Native開發環境的配置

React Native開發環境的配置

1.安裝Homebrew:

在MAC中開啟終端工具並輸入如下語句:

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

這裡寫圖片描述

上述步驟中會提示輸入密碼然後開始下載Homebrew,如果此時網速不穩定可能會出現錯誤提示:curl: (35) Server aborted the SSL handshake。

此時需要執行解除安裝操作,輸入如下命令進行解除安裝:

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

安裝完成會有以下提示:

這裡寫圖片描述

2.安裝npm和Node.js

brew install node

3.安裝WatchMan

該外掛用於監控bug檔案和檔案變化 ,並且可以觸發指定的操作

執行安裝

brew install watchman

這裡寫圖片描述

ps:在Mac OS X 10.11(El Capitan)版本中,homebrew在安裝軟體時可能會碰到/usr/local目錄不可寫的許可權問題。可以使用下面的命令修復:

sudo chown -R `whoami` /usr/local

4.安裝Flow

flow是一個 JavaScript 的靜態型別檢查器,安裝後,方便找出程式碼中可能存在的型別錯誤

執行安裝

brew install flow

這裡寫圖片描述

更新

如果已經安轉了以上的軟體,需要更新到當前最新版本。
首先更新Homebrew的版本庫:

brew update

更新Homebrew庫的內容:

brew  upgrade

清除不再使用的資源:

brew cleanup

React Native安裝

安裝React Native:

npm install -g react-native-cli

ps:如果提示root許可權不夠

sudo npm install -g react-native-cli

這裡寫圖片描述

安裝成功

建立新專案

react-native init 專案名稱

react-native init 專案名稱 --version 0.40.0   //建立一個指定版本為0.40.0版本的專案

ps:由於網路原因,需要等待一段時間。react-native命令列從官方npm獲取程式碼會很慢,可以將npm倉庫源替換為國內映象:

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

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

接下來,執行專案

執行iOS:

react-native run-ios

執行Android:

react-native run-android

ps:一些相關查詢

檢視本地的React Native的版本

react-native --version

更新本地的React Native的版本

npm update -g react-native-cli

查詢react-native的npm包最新版本

npm info react-native

升級或者降級npm包的版本

npm install --save [email protected]

更新專案templates檔案(可選)

react-native upgrade

執行專案:

這裡寫圖片描述

成功。

ps:如果終端提示

這裡寫圖片描述

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

是因為React Native升級了babel6,babel6對babelrc檔案的解析有變更,而其他第三方元件還沒有跟上這個變化。提示的很清晰,刪除檔案即可,刪除react-deep-force-update/.babelrc。

解決辦法:
cd到資料夾下ls -a然後rm即可,然後重啟即可。