React Native開發環境搭建

標籤：

• 安裝Xcode
• 安裝Homebrew
• 檢查是否有警告
• 安裝Android SDK
• 安裝flow和watchman
• 安裝nodejs
• 安裝react-native-cli
• 安裝Genymotion
• 安裝Webstorm 10
• 建立React Native空項目
• 使用Webstorm編輯JSX代碼檔案
• 在iOS模擬器中運行
• 在Android模擬器中運行

安裝Xcode

從App Store搜尋下載。需要Apple Id帳號。

安裝Homebrew

開啟Terminal，執行以下命令即可安裝。詳情請參考Homebrew官網（http://brew.sh/）。

install Homebrew

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

檢查是否有警告

開啟Terminal，執行以下命令，根據提示來消除警告問題。

＃ no need VPNbrew doctor

安裝Android SDK

通過Homebrew可以便捷地把Android SDK安裝到預設目錄"/usr/local/opt/android-sdk"。請在Terminal中執行以下命令。

install Android SDK

# no need VPNbrew install android-sdk

需要設定環境變數$ANDROID_HOME、$PATH。

install Android SDK

# 在Terminal中執行以下命令，開啟環境變數設定檔sudo nano ~/.bash_profile # 粘貼如下指令，儲存環境變數（需要登出並重新登入mac）export ANDROID_HOME=/usr/local/opt/android-sdkexport PATH=$PATH:$ANDROID_HOME/bin:$ANDROID_HOME/tools # 按CTRL＋X可儲存

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

在Terminal中執行"android sdk"即可開啟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

請在Terminal中執行以下兩條命令。

install flow

# no need VPNbrew install flowbrew install watchman

安裝nodejs

從nodejs官網（https://nodejs.org/en/）下載安裝最新版的nodejs（目前的版本是：v4.3.1）。

安裝react-native-cli

通過nodejs可以便捷地安裝"react-native-cli"。請在Terminal中執行以下命令（注意使用"sudo"和"-g"選項）。

install react-native-cli

# no need VPNsudo npm install -g react-native-cli

安裝Genymotion

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

與Android SDK內建的模擬器相比，Genymotion更為流暢，推薦安裝使用。需要去官方網站（https://www.genymotion.com/）註冊個人使用者帳號。

安裝Webstorm 10

Webstorm可以很好的支援JSX文法，並能格式化代碼檔案，適合開發React Native項目。從Webstorm官網（https://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases）可以下載10.0.4版本。在協作平台中，可以找到註冊碼。

建立React Native空項目

建議為React Native項目建立一個根目錄，比如：~/RCTDev，然後在Terminal中執行如下命令（可能需要幾分鐘時間）：

create first project

# no need VPNcd ~/RCTDevreact-native init NCFirstProject

即可建立一個名為"NCFirstProject"的新項目。

使用Webstorm編輯JSX代碼檔案

使用Webstorm開啟目錄"~/RCTDev/NCFirstProject"，雙擊開啟index.ios.js檔案。等待Webstorm識別JSX代碼文法，然後點擊Switch切換。

在Webstrom命令列中，輸入"npm install"命令初始化"React Native"依賴項。

install dependencies of react-native

# no need VPNnpm install

在iOS模擬器中運行

在Webstrom命令列中，輸入"react-native run-ios"即可開啟iOS simulator並運行改項目。

快速鍵：

• Command+R 修改任何js代碼之後，可以通過改快速鍵重載app看效果。
• Ctrl+Command+Z 開啟菜單，可以啟用自動重載、查看幀率、審查元素等。

在Android模擬器中運行

首先需要在Genymotion中登入帳號並且安裝一個Android鏡像。運行Android鏡像後，可以在Webstorm命令視窗中執行"react-native run-android"。

快速鍵：

• Command+M 開啟菜單，可以選擇重載app、啟用自動重載、查看幀率、審查元素等。

React Native開發環境搭建