[[169846]]

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

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

1. 安裝Homebrew

Homebrew, 簡(jiǎn)稱(chēng)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

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

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

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

 Homebrew安裝.png

可通過(guò)如下語(yǔ)句查看安裝是否成功以及安裝的Homebrew版本：

brew -v 

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

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來(lái)安裝Node.js

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

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

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)行語(yǔ)句如下：

npm install -g react-native-cli 

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

安裝react-native-cli.png

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

sudo npm install -g react-native-cli 

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

//將npm倉(cāng)庫(kù)替換為國(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 開(kāi)發(fā)這個(gè)最基礎(chǔ)的，應(yīng)該一般有安裝，，沒(méi)有的話(huà)只推薦在App Store直接搜索安裝。

(二) 推薦安裝的工具

1. Watchman

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

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

brew install watchman 

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

安裝 Watchman.png

2. Flow

Flow是一個(gè)靜態(tài)的JS類(lèi)型檢查工具，可方便找出代碼中可能存在的類(lèi)型錯(cuò)誤。

譯注：你在很多示例中看到的奇奇怪怪的冒號(hào)問(wèn)號(hào)，以及方法參數(shù)中像類(lèi)型一樣的寫(xiě)法，都是屬于這個(gè)flow工具的語(yǔ)法。這一語(yǔ)法并不屬于ES標(biāo)準(zhǔn)，只是Facebook自家的代碼規(guī)范。

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

brew install flow 

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

安裝Flow.png

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

可以直接用自己喜歡的編輯器進(jìn)行編輯。

React Native官方推薦了三種IDE編寫(xiě)React Native應(yīng)用:

1)Atom和Nuclide

2)WebStorm

3)Sublime Text

4) VSCode+React Native Tools

更近一步的了解和使用參考我一起寫(xiě)的另一篇文章哈哈：

React Native 開(kāi)發(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)的等待過(guò)程，可能由于項(xiàng)目依賴(lài)包本身就很龐大，讓后下載速度比較慢。總之我半夜做的嘗試，為了寫(xiě)文章截圖哈哈，安心去看了一集異世界的動(dòng)漫，然后回來(lái)就發(fā)現(xiàn)創(chuàng)建項(xiàng)目成功了哈。。(ps：之前在另一部電腦就試過(guò)創(chuàng)建項(xiàng)目活著集成原生的時(shí)候執(zhí)行這個(gè)命令，不過(guò)等得不耐煩就又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 

接下來(lái)就是一連串反應(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中打開(kāi)AwesomeProject文件夾，然后運(yùn)行

方法二：雙擊ios/AwesomeProject.xcodeproj文件然后在Xcode中點(diǎn)擊Run按鈕。(最常用，對(duì)iOS開(kāi)發(fā)者)

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

使用你喜歡的編輯器打開(kāi)index.ios.js并隨便改上幾行。

在iOS Emulator中按下⌘-R就可以刷新APP并看到你的***修改！