一、 React Native 環境需求
1.1 安裝Homebrew
Homebrew是Mac中的一個包管理工具，沒有安裝的用戶可以通過termnal安裝,安裝過的用戶并且升級為最新版的可以直接跳至 1.2。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
已經安裝過Homebrew的用戶，通過下面命令將其升級為最新版，版本過低將會導致無法安裝后續幾個組件.
brew update
目前樓主使用的版本為：0.9.9
1.2 安裝watchman
watchman是用于監聽文件變化的工具，應該是用于監聽文件變化，然后界面做出響應。執行如下命令
brew install watchman
1.3 安裝flow
flow用于對代碼進行類型檢查，用于靜態分析js語法錯誤的工具。執行如下的命令：
brew install flow
1.4 安裝nvm
nvm 是 Node.js 的版本管理器，可以輕松安裝并管理各個版本的 Node.js 。
注意:不建議用戶使用Homebrew安裝nvm，有可能會遇到很多坑，這是一部血淚史，不在此贅述,自我感覺RP好的可以嘗試。
1.4.1 使用Homebrew安裝（不建議）
通過 Homebrew 安裝命令:
brew install nvm
將下列指令加入 .bash_profile(一般termnal會提示)
NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
重新載入 .bash_profile設定，使其生效
$ source .bash_profile
1.4.2 直接安裝nvm
使用官網提供的直接安裝方式
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash
然后按照終端提示：依次輸入:
export NVM_DIR="/Users/CrabMan/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
1.4.3 nvm安裝node.js和npm
npm是用于node.js包依賴管理的工具，安裝完node.js以后.
用下面命令查看有哪些版本可以安裝
nvm ls-remote
一般采用設置并安裝
nvm install node && nvm alias default node
二、 安裝React Native
首先 node 要在4.0以上，最好再更新一下 npm 的版本
npm i npm -g
注意：Mac 用戶如果無法成功或者是非全局安裝，可以使用全局安裝，這時需要添加 sudo
提高命令的權限
sudo npm i npm -g # 需要輸入開機密碼
因為天朝限制，把 npm 指向國內鏡像，避免網絡環境對安裝過程造成的麻煩
$ npm config set registry https://registry.npm.taobao.org
$ npm config set disturl https://npm.taobao.org/dist
正式安裝 react-native 命令行工具
$ npm i react-native-cli -g
# Mac 用戶需要沒有反應可以嘗試 $ sudo npm i react-native-cli -g
三、 初始化RN項目
這里的項目名必須以大寫字母開頭。否則會報錯
react-native init CrabManRN
初始化項目時，因為天朝網速原因，可能會一直卡在（如果卡的時間較長，可以嘗試重裝，見文末）
Installing react-native package from npm...
耐心等待......網絡上面查到的目前等待時間最久的時間為兩天.
四、 iOS 開發環境準備
IOS 的開發環境相對來說比較簡單了,只需要保證 Xcode 版本在 7.0 以上就行了，否則RN中的部分OC語法會不支持。cd到RN的項目路徑下，使用終端build 并運行 iOS項目.
$ cd CrabManRN
$ react-native run-ios
一堆命令滾動完畢后會彈出新的終端窗口
等待一段時間以后，終端顯示完成100%
期間模擬器會自動打開,繼續等待完成至100%
五 Android 開發環境準備
5.1 安裝Git
Mac上如果你已經安裝了XCode，那么Git也就隨之安裝了，否則請使用homebrew進行安裝：
brew install git
5.2 安裝Android SDK(已安裝的請跳過這一步)
首先下載安裝最新版的JDK
然后使用Homebrew安裝Android SDK:
$ brew install android-sdk
定義ANDROID_HOME環境變量
重要: 確保ANDROID_HOME
環境變量指向你已經安裝的Android SDK目錄:在你的~/.bashrc 或 ~/.bash_profile，而小數點開頭的文件在Finder中是隱藏的，這兩個文件有可能還沒有被創建。請在終端下使用sudo vi ~/.bashrc
命令創建或編輯。如不熟悉vi操作，請點擊這里學習
筆者是通過Homebrew安裝SDK的，則加入下列路徑
export ANDROID_HOME=/usr/local/opt/android-sdk
直接安裝Android SDK的用戶使用下面命令：
# 可能是（具體看Android studio中把SDK放在哪）：
export ANDROID_HOME=~/Library/Android/sdk
使用終端下載必要的sdk
選中以下項目：
Android SDK Build-tools version 23.0.1（這個必須版本嚴格匹配23.0.1）
Android 6.0 (API 23)
Local Maven repository for Support Libraries(之前叫做Android Support Repository)
筆者沒有使用模擬器，直接真機調試，在運行之前需要將一個已經打開開發者模式，并且打開USB調試的安卓手機連接到電腦上，使用下面名列確認是否連接
adb list
在終端cd到項目路徑下，運行安卓程序.
react-native run-android
就在剛剛，前天運行的好好的程序今天飄紅了，我的內心是崩潰的,貌似是昨天我修改源文件造成的，現在我重新初始化一個RN項目，運行試試.
接下來嘗試運行 ：
$ cd /Users/CrabMan/Desktop/CRAB_RN
$ react-native run-android
運行成功
至此，reactNative的環境搭建，項目的初始化，以及iOS以及Android上分別運行成功。其實我知道，這一切才剛剛開始
六、管理React Native庫的版本
在開發中，會經常的去控制React Native的版本庫，得以適配各種條件下的開發，那該如何查看、控制ReactNative的版本呢？
6.1查看本地的React Native的版本
$ react-native --version
6.2 更新本地的React Native的版本
npm update -g react-native-cli
6.3 查詢react-native的npm包最新版本
NPM的全稱是Node Package Manager ，是一個NodeJS包管理和分發工具，已經成為了非官方的發布Node模塊（包）的標準。
npm包地址 ：
https://www.npmjs.com/package/react-native
命令行查詢
npm info react-native
6.4 升級或者降級npm包的版本
$ npm install --save react-native@0.18
6.5 更新項目templates文件（可選）
新的npm包會包含更新在運行react-native init命令生成的一些動態文件，例如init創建項目的時候會生成iOS和Android的子項目，我們可以通過以下的命令進行獲取最新的代碼
命令行查詢
$ react-native upgrade
七、WebStrom設置代碼提示
8.1 從gitHub上下載xml插件
$ git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
8.2 安裝
將ReactNative.xml文件復制~/Library/Preferences/WebStorm10/templates ，然后重啟 WebStrom.如果路徑下沒有templates文件夾，可以手動創建一個。
4常見的問題及其解決辦法
4.1.初始化項目時，長時間卡在Installing react-native package from npm...
當時遇到三次遇到這個問題的原因是使用Homebrew安裝的nvm，但是去nvm官網發現，nvm不支持Homebrew,通過直接安裝nvm解決該問題.
首先卸載Homebrew安裝的nvm
brew uninstall nvm
保險起見，去brew的路徑將所有nvm的文件刪除.
nvm文件路徑： /usr/local/lib
檢查local路徑下的文件，是否刪除干凈，然后重新安裝.
4.2.直接安裝nvm配置按照終端環境變量報錯
-bash: /usr/local/opt/nvm/nvm.sh: No such file or directory
或者類似的問題，例如:
/usr/local/bin/npm: No such file or directory
等等
原因是nvm不在你的環境路徑下面需要重新配置
打開你的/.bashrc（或者/.zshrc，或者/.profile，或者/.bash_profile）因此終端輸入
open ~/.bash_profile
在打開的文件中輸入
.~/.nvm/nvm.sh
在末尾添加如下命令
. ~/.nvm/nvm.sh
保存并退出，然后重啟終端，輸入nvm，完美解決
4.3.運行Android遇到問題:application (項目名) has not been registered
這種問題在stackflow中找到了解決問題的辦法,出現這種現象的解決辦法有三種.
4.3.1.最為常見的原因
在運行現在的項目的時候，reactNative的服務依舊保持著上一個項目。解決辦法很簡單只需要在終端中結束所有進程，然后重新啟動服務即可
$ ps aux | grep react
$ npm start
#確保程序啟動以后 control + c
$ react-native run-android
4.3.2 IDE影響
因為anroid studio或者是xcode的影響，完全退出所有的IDE，重啟終端，然后重新運行項目，即可解決。
4.3.3.較為少見（很少有人會修改項目名）
根目錄./index.ios.js中
AppRegistry.registerComponent('項目名',() => ...);
與./ios/項目名/appDelegate.m中的
RCTRootViewrootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"項目名" launchOptions:launchOptions];
或是./android/app/src/main/java/com/項目名/MainActivity.java*中的
mReactRootView.startReactApplication(mReactInstanceManager, "項目名", null);
項目名沒有保持一致，修改為相同的即可。
4.4 Could not connect to development server
原因屏幕中已經顯示清楚了，一般按照屏幕的解決辦法都可以解決。
說下ip地址的解決辦法 ，首先在終端查看ip
$ ifconfig
然后調出開發者菜單(搖晃手機)
-> dev Settings-> debug server host & port ...
把剛才查到的本機ip + 端口號填上 （我的是 192.168.1.255:8081）返回 并Reload 下
