搭建React Native開(kāi)發(fā)環(huán)境

原文地址：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/setup-react-native-development-environment/

安裝Xcode

從App Store搜索下載。需要Apple Id賬號(hào)。

安裝Homebrew

打開(kāi)Terminal，執(zhí)行以下命令即可安裝。詳情請(qǐng)參考Homebrew官網(wǎng)（http://brew.sh/）。

install Homebrew

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

安裝完成之后，使用"brew doctor"命令檢查是否安裝成功。根據(jù)提示解決對(duì)應(yīng)的問(wèn)題、消除警告。

安裝Android SDK

通過(guò)Homebrew可以便捷地把Android SDK安裝到默認(rèn)目錄"/usr/local/opt/android-sdk"。請(qǐng)?jiān)赥erminal中執(zhí)行以下命令。

install Android SDK

# no need ×××
brew install android-sdk

需要設(shè)置環(huán)境變量$ANDROID_HOME、$PATH。

install Android SDK

# 在Terminal中執(zhí)行以下命令，打開(kāi)環(huán)境變量配置文件
sudo nano ~/.bash_profile
 
# 粘貼如下指令，保存環(huán)境變量（需要注銷并重新登錄mac）
export ANDROID_HOME=/usr/local/opt/android-sdk
export PATH=$PATH:$ANDROID_HOME/bin:$ANDROID_HOME/tools
 
# 按CTRL＋X可保存

更新Android SDK組件（需要掛×××）

在Terminal中執(zhí)行"android sdk"即可打開(kāi)Android SDK更新管理工具。

如下圖安裝Android SDK中的組件，注意"Android SDK Build-tools"的版本要求是23.0.1，使用Genymotion的情況下，可以不安裝"Intel x86 Atom_64 System Image"和"Intel x86 Atom System Image"。

安裝flow和watchman

請(qǐng)?jiān)赥erminal中執(zhí)行以下兩條命令。

install flow

# no need ×××
brew install flow
brew install watchman

安裝nodejs

從nodejs官網(wǎng)（https://nodejs.org/en/）下載安裝最新版的nodejs（當(dāng)前版本是：v4.3.1）。

安裝react-native-cli

通過(guò)nodejs可以便捷地安裝"react-native-cli"。請(qǐng)?jiān)赥erminal中執(zhí)行以下命令（注意使用"sudo"和"-g"選項(xiàng)）。

install react-native-cli

# no need ×××
sudo npm install -g react-native-cli

安裝Genymotion

首先安裝VirtualBox，從百度搜索即可。

與Android SDK自帶的模擬器相比，Genymotion更為流暢，推薦安裝使用。需要去官方網(wǎng)站（https://www.genymotion.com/）注冊(cè)個(gè)人用戶賬號(hào)。

VirtualBox5.0.14與Genymotion2.6.0安裝包在移動(dòng)硬盤(pán)上有。

安裝Webstorm 10

Webstorm可以很好的支持JSX語(yǔ)法，并能格式化代碼文件，適合開(kāi)發(fā)React Native項(xiàng)目。從Webstorm官網(wǎng)（https://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases）可以下載10.0.4版本。在協(xié)作平臺(tái)中，可以找到注冊(cè)碼。

創(chuàng)建React Native空項(xiàng)目

建議為React Native項(xiàng)目創(chuàng)建一個(gè)根目錄，比如：~/RCTDev，然后在Terminal中執(zhí)行如下命令（可能需要幾分鐘時(shí)間）：

create first project

# no need ×××
cd ~/RCTDev
react-native init NCFirstProject

即可創(chuàng)建一個(gè)名為"NCFirstProject"的新項(xiàng)目。

使用Webstorm編輯JSX代碼文件

使用Webstorm打開(kāi)目錄"~/RCTDev/NCFirstProject"，雙擊打開(kāi)index.ios.js文件。等待Webstorm識(shí)別JSX代碼語(yǔ)法，然后點(diǎn)擊Switch切換。

在Webstrom命令行中，輸入"npm install"命令初始化"React Native"依賴項(xiàng)。

install dependencies of react-native

# no need ×××
npm install

在iOS模擬器中運(yùn)行

在Webstrom命令行中，輸入"react-native run-ios"即可打開(kāi)iOS simulator并運(yùn)行改項(xiàng)目。

快捷鍵：

• Command+R 修改任何js代碼之后，可以通過(guò)改快捷鍵重載app看效果。

• Ctrl+Command+Z 打開(kāi)菜單，可以啟用自動(dòng)重載、查看幀率、審查元素等。

在Android模擬器中運(yùn)行

首先需要在Genymotion中登錄賬號(hào)并且安裝一個(gè)Android鏡像。運(yùn)行Android鏡像后，可以在Webstorm命令窗口中執(zhí)行"react-native run-android"。

快捷鍵：

• Command+M 打開(kāi)菜單，可以選擇重載app、啟用自動(dòng)重載、查看幀率、審查元素等。