搭建React Native開發環境

平臺 macOS,目標平臺: iOS

---

安裝

1. Homebrew

Homebrew, Mac系統的包管理器，用於安裝NodeJS和一些其他必需的工具軟件。

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

2. Node

很多教程推薦使用brew,但是許多人又反應後期項目同步用的node不一樣
所以我建議直接官網下載,並保留安裝包

https://nodejs.org/zh-cn/

3.國內鏡像加速

安裝完node後建議設置npm鏡像以加速後面的過程（或使用科學上網工具）。註意：不要使用cnpm！cnpm安裝的模塊路徑比較奇怪，packager不能正常識別！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4.Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用於執行創建、初始化、更新項目、運行打包服務（packager）等任務。

npm install -g yarn react-native-cli

安裝完yarn後同理也要設置鏡像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

如果你看到EACCES: permission denied這樣的權限報錯，那麼請參照上文的homebrew譯註，修復/usr/local目錄的所有權：

sudo chown -R `whoami` /usr/local

5.XCode

Appstore直接下載安裝

6. Watchman

Watchman是由Facebook提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能（packager可以快速捕捉文件的變化從而實現實時刷新）。

brew install watchman

7. Flow

Flow是一個靜態的JS類型檢查工具。譯註：你在很多示例中看到的奇奇怪怪的冒號問號，以及方法參數中像類型一樣的寫法，都是屬於這個flow工具的語法。這一語法並不屬於ES標準，隻是Facebook自傢的代碼規范。所以新手可以直接跳過（即不需要安裝這一工具，也不建議去費力學習flow相關語法）。

brew install flow

測試安裝

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

提示：你可以使用–version參數創建指定版本的項目。例如react-native init MyApp –version 0.39.2。註意版本號必須精確到兩個小數點。

或者雙擊ios/AwesomeProject.xcodeproj文件然後在Xcode中點擊Run按鈕。

修改項目

現在你已經成功運行瞭項目，我們可以開始嘗試動手改一改瞭：

使用你喜歡的編輯器打開index.ios.js並隨便改上幾行。 在iOS Emulator中按下?-R就可以刷新APP並看到你的最新修改！