一、 React Native 環(huán)境需求
1.1 安裝Homebrew
Homebrew是Mac中的一個包管理工具，沒有安裝的用戶可以通過termnal安裝,安裝過的用戶并且升級為最新版的可以直接跳至 1.2。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
已經(jīng)安裝過Homebrew的用戶，通過下面命令將其升級為最新版，版本過低將會導(dǎo)致無法安裝后續(xù)幾個組件.
brew update
目前樓主使用的版本為：0.9.9
1.2 安裝watchman
watchman是用于監(jiān)聽文件變化的工具，應(yīng)該是用于監(jiān)聽文件變化，然后界面做出響應(yīng)。執(zhí)行如下命令
brew install watchman
1.3 安裝flow
flow用于對代碼進(jìn)行類型檢查，用于靜態(tài)分析js語法錯誤的工具。執(zhí)行如下的命令：
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設(shè)定，使其生效
$ source .bash_profile
1.4.2 直接安裝nvm
使用官網(wǎng)提供的直接安裝方式
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
一般采用設(shè)置并安裝
nvm install node && nvm alias default node
二、 安裝React Native
首先 node 要在4.0以上，最好再更新一下 npm 的版本
npm i npm -g
注意：Mac 用戶如果無法成功或者是非全局安裝，可以使用全局安裝，這時需要添加 sudo
提高命令的權(quán)限
sudo npm i npm -g # 需要輸入開機(jī)密碼
因?yàn)樘斐拗?，?npm 指向國內(nèi)鏡像，避免網(wǎng)絡(luò)環(huán)境對安裝過程造成的麻煩
$ 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 用戶需要沒有反應(yīng)可以嘗試 $ sudo npm i react-native-cli -g
三、 初始化RN項目
這里的項目名必須以大寫字母開頭。否則會報錯
react-native init CrabManRN
初始化項目時，因?yàn)樘斐W(wǎng)速原因，可能會一直卡在（如果卡的時間較長，可以嘗試重裝，見文末）
Installing react-native package from npm...
耐心等待......網(wǎng)絡(luò)上面查到的目前等待時間最久的時間為兩天.
四、 iOS 開發(fā)環(huán)境準(zhǔn)備
IOS 的開發(fā)環(huán)境相對來說比較簡單了,只需要保證 Xcode 版本在 7.0 以上就行了，否則RN中的部分OC語法會不支持。cd到RN的項目路徑下，使用終端build 并運(yùn)行 iOS項目.
$ cd CrabManRN
$ react-native run-ios
一堆命令滾動完畢后會彈出新的終端窗口
等待一段時間以后，終端顯示完成100%
期間模擬器會自動打開,繼續(xù)等待完成至100%
五 Android 開發(fā)環(huán)境準(zhǔn)備
5.1 安裝Git
Mac上如果你已經(jīng)安裝了XCode，那么Git也就隨之安裝了，否則請使用homebrew進(jìn)行安裝：
brew install git
5.2 安裝Android SDK(已安裝的請?zhí)^這一步)
首先下載安裝最新版的JDK
然后使用Homebrew安裝Android SDK:
$ brew install android-sdk
定義ANDROID_HOME環(huán)境變量
重要: 確保ANDROID_HOME
環(huán)境變量指向你已經(jīng)安裝的Android SDK目錄:在你的~/.bashrc 或 ~/.bash_profile，而小數(shù)點(diǎn)開頭的文件在Finder中是隱藏的，這兩個文件有可能還沒有被創(chuàng)建。請在終端下使用sudo vi ~/.bashrc
命令創(chuàng)建或編輯。如不熟悉vi操作，請點(diǎn)擊這里學(xué)習(xí)
筆者是通過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（這個必須版本嚴(yán)格匹配23.0.1）
Android 6.0 (API 23)
Local Maven repository for Support Libraries(之前叫做Android Support Repository)
筆者沒有使用模擬器，直接真機(jī)調(diào)試，在運(yùn)行之前需要將一個已經(jīng)打開開發(fā)者模式，并且打開USB調(diào)試的安卓手機(jī)連接到電腦上，使用下面名列確認(rèn)是否連接
adb list
在終端cd到項目路徑下，運(yùn)行安卓程序.
react-native run-android
就在剛剛，前天運(yùn)行的好好的程序今天飄紅了，我的內(nèi)心是崩潰的,貌似是昨天我修改源文件造成的，現(xiàn)在我重新初始化一個RN項目，運(yùn)行試試.
接下來嘗試運(yùn)行 ：
$ cd /Users/CrabMan/Desktop/CRAB_RN
$ react-native run-android
運(yùn)行成功
至此，reactNative的環(huán)境搭建，項目的初始化，以及iOS以及Android上分別運(yùn)行成功。其實(shí)我知道，這一切才剛剛開始
六、管理React Native庫的版本
在開發(fā)中，會經(jīng)常的去控制React Native的版本庫，得以適配各種條件下的開發(fā)，那該如何查看、控制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包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)。
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包會包含更新在運(yùn)行react-native init命令生成的一些動態(tài)文件，例如init創(chuàng)建項目的時候會生成iOS和Android的子項目，我們可以通過以下的命令進(jìn)行獲取最新的代碼
命令行查詢
$ react-native upgrade
七、WebStrom設(shè)置代碼提示
8.1 從gitHub上下載xml插件
$ git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
8.2 安裝
將ReactNative.xml文件復(fù)制~/Library/Preferences/WebStorm10/templates ，然后重啟 WebStrom.如果路徑下沒有templates文件夾，可以手動創(chuàng)建一個。
4常見的問題及其解決辦法
4.1.初始化項目時，長時間卡在Installing react-native package from npm...
當(dāng)時遇到三次遇到這個問題的原因是使用Homebrew安裝的nvm，但是去nvm官網(wǎng)發(fā)現(xiàn)，nvm不支持Homebrew,通過直接安裝nvm解決該問題.
首先卸載Homebrew安裝的nvm
brew uninstall nvm
保險起見，去brew的路徑將所有nvm的文件刪除.
nvm文件路徑： /usr/local/lib
檢查local路徑下的文件，是否刪除干凈，然后重新安裝.
4.2.直接安裝nvm配置按照終端環(huán)境變量報錯
-bash: /usr/local/opt/nvm/nvm.sh: No such file or directory
或者類似的問題，例如:
/usr/local/bin/npm: No such file or directory
等等
原因是nvm不在你的環(huán)境路徑下面需要重新配置
打開你的/.bashrc（或者/.zshrc，或者/.profile，或者/.bash_profile）因此終端輸入
open ~/.bash_profile
在打開的文件中輸入
.~/.nvm/nvm.sh
在末尾添加如下命令
. ~/.nvm/nvm.sh
保存并退出，然后重啟終端，輸入nvm，完美解決
4.3.運(yùn)行Android遇到問題:application (項目名) has not been registered
這種問題在stackflow中找到了解決問題的辦法,出現(xiàn)這種現(xiàn)象的解決辦法有三種.
4.3.1.最為常見的原因
在運(yùn)行現(xiàn)在的項目的時候，reactNative的服務(wù)依舊保持著上一個項目。解決辦法很簡單只需要在終端中結(jié)束所有進(jìn)程，然后重新啟動服務(wù)即可
$ ps aux | grep react
$ npm start
#確保程序啟動以后 control + c
$ react-native run-android
4.3.2 IDE影響
因?yàn)閍nroid studio或者是xcode的影響，完全退出所有的IDE，重啟終端，然后重新運(yùn)行項目，即可解決。
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
原因屏幕中已經(jīng)顯示清楚了，一般按照屏幕的解決辦法都可以解決。
說下ip地址的解決辦法 ，首先在終端查看ip
$ ifconfig
然后調(diào)出開發(fā)者菜單(搖晃手機(jī))
-> dev Settings-> debug server host & port ...
把剛才查到的本機(jī)ip + 端口號填上 （我的是 192.168.1.255:8081）返回 并Reload 下
