(一) 搭建基本環(huán)境（必要）

使用React Native開發(fā)iOS應(yīng)用需要OSX系統(tǒng)，Xcode，Homebrew，node，npm，也可以有選擇的使用watchman 、Flow。

1. 安裝Homebrew

Homebrew, 簡(jiǎn)稱brew, Mac系統(tǒng)的包管理器, 用于安裝NodeJS和一些其他必需的工具軟件。
Home-brew 的使用方式:
1)搜索軟件：brew search 軟件名，如brew search wget
2)安裝軟件：brew install 軟件名，如brew install wget
3)卸載軟件：brew remove 軟件名，如brew remove wget

打開終端，運(yùn)行以下語句（中間需要輸入密碼）進(jìn)行安裝：

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

運(yùn)行效果如下：

Homebrew安裝.png

可通過如下語句查看安裝是否成功以及安裝的Homebrew版本：

brew -v

正常情況下均可安裝成功，若出現(xiàn)網(wǎng)絡(luò)問題安裝失敗，則運(yùn)行如下語句清理后再重新安裝：

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

2. 使用Homebrew來安裝Node.js

React Native需要NodeJS 4.0或更高版本。本文發(fā)布時(shí)Homebrew默認(rèn)安裝的是6.x版本，完全滿足要求。

終端運(yùn)行語句如下：

brew install node

運(yùn)行效果如下：

安裝Node.js.png

3. 安裝React Native的命令行工具（react-native-cli）

React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。

終端運(yùn)行語句如下：

npm install -g react-native-cli

運(yùn)行效果如下：

安裝react-native-cli.png

若出現(xiàn)錯(cuò)誤（可能由于權(quán)限不足），則實(shí)用以下語句進(jìn)行安裝：

sudo npm install -g react-native-cli

補(bǔ)充：（由于國(guó)內(nèi)網(wǎng)絡(luò)問題，可以將npm倉(cāng)庫替換為國(guó)內(nèi)鏡像）

//將npm倉(cāng)庫替換為國(guó)內(nèi)鏡像：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4. Xcode

iOS 開發(fā)這個(gè)最基礎(chǔ)的，應(yīng)該一般有安裝，，沒有的話只推薦在App Store直接搜索安裝。

(二) 推薦安裝的工具

1. Watchman

Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開發(fā)時(shí)的性能（packager可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）。

終端運(yùn)行語句安裝：

brew install watchman

運(yùn)行效果如下：

安裝 Watchman.png

2. Flow

Flow是一個(gè)靜態(tài)的JS類型檢查工具，可方便找出代碼中可能存在的類型錯(cuò)誤。
譯注：你在很多示例中看到的奇奇怪怪的冒號(hào)問號(hào)，以及方法參數(shù)中像類型一樣的寫法，都是屬于這個(gè)flow工具的語法。這一語法并不屬于ES標(biāo)準(zhǔn)，只是Facebook自家的代碼規(guī)范。

終端運(yùn)行語句安裝：

brew install flow

運(yùn)行效果如下：

安裝Flow.png

3. React Native開發(fā)之IDE

可以直接用自己喜歡的編輯器進(jìn)行編輯。
React Native官方推薦了三種IDE編寫React Native應(yīng)用:

1)Atom和Nuclide
2)WebStorm
3)Sublime Text
4)** VSCode＋React Native Tools**

更近一步的了解和使用參考我一起寫的另一篇文章哈哈：
React Native 開發(fā)之IDE

(三) 創(chuàng)建第一個(gè)項(xiàng)目

1. 初始化創(chuàng)建項(xiàng)目

命令行創(chuàng)建項(xiàng)目：

react-native init AwesomeProject

運(yùn)行截圖如下：

react-native init AwesomeProject.png

這里可能會(huì)是個(gè)漫長(zhǎng)的等待過程，可能由于項(xiàng)目依賴包本身就很龐大，讓后下載速度比較慢?？傊野胍棺龅膰L試，為了寫文章截圖哈哈，安心去看了一集異世界的動(dòng)漫，然后回來就發(fā)現(xiàn)創(chuàng)建項(xiàng)目成功了哈。。（ps：之前在另一部電腦就試過創(chuàng)建項(xiàng)目活著集成原生的時(shí)候執(zhí)行這個(gè)命令，不過等得不耐煩就又ca掉它了，，可能真的需要耐心哈哈）
創(chuàng)建成功則如下：

創(chuàng)建成功截圖.png

生成項(xiàng)目文件集.png

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

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

//  視情況而定，總之進(jìn)入項(xiàng)目根目錄
cd AwesomeProject

//  運(yùn)行iOS項(xiàng)目
react-native run-ios

接下來就是一連串反應(yīng)，截圖如下，成功運(yùn)行項(xiàng)目：

彈出運(yùn)行服務(wù)窗口.png

虛擬機(jī)運(yùn)行成功截圖.png

補(bǔ)充：
若是調(diào)試安卓版本：（需要安裝好安卓SDK、配置環(huán)境等）

//  運(yùn)行安卓項(xiàng)目
react-native run-android

3. 除了命令行運(yùn)行，也可直接像iOS原生那樣運(yùn)行

方法一：Nuclide中打開AwesomeProject文件夾，然后運(yùn)行
方法二：雙擊ios/AwesomeProject.xcodeproj文件然后在Xcode中點(diǎn)擊Run按鈕。（最常用，對(duì)iOS開發(fā)者）

4. 簡(jiǎn)單的修改調(diào)試

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

大功告成，文章的編寫和實(shí)踐參考了很多文章，最主要參考的是官方中文文檔。

開始在寫React Native的學(xué)習(xí)教程，是一邊研究一邊編寫的，已有的成果如下：
1) React Native 簡(jiǎn)介與入門

2. React Native 環(huán)境搭建和創(chuàng)建項(xiàng)目(Mac)
   3) React Native 開發(fā)之IDE
   4) React Native 入門項(xiàng)目與解析
   5) React Native 相關(guān)JS和React基礎(chǔ)
   6) React Native 組件生命周期(ES6)
   7) React Native 集成到原生項(xiàng)目(iOS)
   8) React Native 與原生之間的通信(iOS)
   9) React Native 封裝原生ＵI組件(iOS)
   ...繼續(xù)努力中