-------------如果你使用的是Mac OS系統,請參照以下步驟-----------

一、環境需求

1.1  安裝Homebrew

       Homebrew是OS X的套件(包)管理器，我們可以通過它獲取並且安裝很多元件

安裝方式:

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

1.2  安裝npm 和 Node.js

   Node.js最好安裝4.0及其以上更高版本，node安裝成功後npm自動也就有了，直接下載安裝Node.js，網址：https://nodejs.org/en/download/ 

1.3  安裝WatchMan

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

安裝方式

      brew install watchman

 驗證是否安裝成功

      注意：在Max OS X 10.11（El Capitan)版本中，homebrew在安裝軟體時可能會碰到/usr/local目錄不可寫的許可權問題。可以使用下面的命令修復：

sudo chown -R `whoami` /usr/local

  1.3  安裝Flow

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

安裝方式

brew install flow

驗證是否安裝成功

(注意：如果提示command not found,請加上sudo獲得最高許可權)

二、React Native安裝

2.1 安裝React Native

        npm install -g react-native-cli

2.2 安裝截圖如下:

-------------如果你使用的是Windows系統,請參照以下步驟-----------

一、確保所有的命令列操作都在管理員許可權下操作

二、需要安裝的外掛

2.1 Chocolatey

     Chocolatey是一個Windows上的包管理器，類似於Mac上的watchMan。一般的安裝步驟應該是下面這樣, 如果國內訪問失敗, 請使用翻牆工具:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

2.2  Python 2

choco install python2

2.3 Node

開啟命令提示符視窗，使用Chocolatey來安裝NodeJS.

choco install nodejs.install

安裝完node後建議設定npm映象以加速後面的過程（或使用科學上網工具）。

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

-------------以下步驟為公共步驟-----------

三、 ios開發環境需求

Xcode 7 及其以上更高版本

四、 Android開發環境需求

 安裝最新版的JDK:

      下載安裝地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html （資料中已經存放）

      可以安裝Android studio省略以下步驟，建議安裝Android studio。

4.1  安裝Genymotion

       Genymotion是一個第三方模擬器，它比Google官方的模擬器更易設定且效能更好。但是，它只針對個人使用者免費。

1）下載並安裝Genymotion

      https://www.genymotion.com/

2）開啟Genymotion,如果你尚未安裝VirtualBox,它有可能會提示你安裝

3）建立一個模擬器並啟動

4）按下⌘+M可以開啟開發者選單(在安裝並啟動了React Native應用之後)

五、 React Native的第一個應用

5.1 執行命令,生成一個工程

     react-native init 專案名稱

注意:由於眾所周知的網路原因，需要等待一段時間（具體視網路情況而定）。react-native命令列從npm官方源拖程式碼時會遇上麻煩，可以將npm倉庫源替換為國內映象：

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

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

5.2  執行截圖

5.3 目錄結構截圖

目錄結構分析:

a）預設生成android和ios兩個平臺的原生專案；

b）其中，index.android.js和index.ios.js檔案為Android和iOS的空殼應用檔案；

c）此外，node_modules資料夾，是為Node.js存放和管理npm包資源，也包含React Native框架檔案。

檢視index.ios.js中的程式碼:

六、執行工程檔案

      不管是 iOS 還是 Android，在開發除錯階段，都需要在 Mac 上啟動一個 HTTP 服務，稱為Debug Server，預設執行在 8081 埠，APP 通 Debug Server 載入 js。

6.1 開啟Xcode，執行你的第一個React Native建立的iOS應用

        圖1 - 啟動React native 伺服器

        圖2 - 客戶端執行介面

6.2 把React Native建立的應用跑在Android上

a) 命令列執行cd SeeMyGoProduct,路徑切換到專案主目錄

b) 命令列執行react-native run-android進行載入執行android 應用。

c) 使用編輯器進行開啟和修改index.android.js檔案，接著通過選單按鈕選擇Reload JS來進行重新整理修改

七、管理React Native庫的版本

       在開發中，會經常的去控制React Native的版本庫，得以適配各種條件下的開發，那該如何檢視、控制ReactNative的版本呢？

7.1 檢視本地的React Native的版本

  命令列輸入

   react-native --version

  命令列效果

7.2 更新本地的React Native的版本

    命令列輸入

    npm update -g react-native-cli

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

NPM的全稱是Node Package Manager ，是一個NodeJS包管理和分發工具，已經成為了非官方的釋出Node模組（包）的標準。

    npm包地址 ：

     https://www.npmjs.com/package/react-native

    命令列查詢

      npm info react-native

    查詢效果

   專案中檢視

7.4 升級或者降級npm包的版本

    npm install --save [email protected]

7.5 更新專案templates檔案（可選）

       新的npm包會包含更新在執行react-native init命令生成的一些動態檔案，例如init建立專案的時候會生成iOS和Android的子專案，我們可以通過以下的命令進行獲取最新的程式碼

     命令列查詢

      react-native upgrade

八、WebStom設定React Native程式碼提示

    8.1  從gitHub上下載xml外掛

 git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate  

     8.2  安裝

 將ReactNative.xml複製到 ~/Library/Preferences/WebStorm10/templates ，然後重啟 WebStrom