本篇目的

React Native 有非常優秀的 Getting Started 文件，有寫明了要如何安裝特定平台的環境。而這篇會著重在提供簡短且圖文並茂的介紹。

準備 iOS 開發環境

首先，準備好你的 Mac，如果沒有的話這裡有購買連結 (誤

一身才華，一觸，即發。 ...什麼鬼。

雖然貴，但是沒有 iOS 的 React Native 有如半殘，會有點可惜。

當然，另一個重點是你必須要有 Xcode (可以在 App Store 安裝)：

準備 Android 開發環境

Android 的部分比 iOS 稍微複雜：

1. JDK >= 1.8

可以用以下指令來檢查 JDK 是否大於 1.8：

$ javac -version

JDK 下載位置

2. 安裝 Android Studio

第一次打開時選擇 Custom 安裝，並勾選安裝以下的項目：

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

Android Studio 下載位置

3. 設定 Android Studio

勾選 Android 6.0 (Marshmallow)

勾選右下方的 Show Package Details checkbox，並選擇：

• Google APIs
• Intel x86 Atom System Image
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image

接著來到 SDK Tools 的 Tab：

勾選右下方的 Show Package Details checkbox，並選擇：

• Android SDK Build-Tools 23.0.1

點擊 Apply 並等它們下載安裝完成。

4. AVD (Android Virtual Device)

只要執行下述指令就能打開 Android Virtual Device (AVD) Manager：

$ android avd

如果還沒有 Virtual Device 的話就在這邊建立一個。

5. 設定 ANDROID_HOME 環境變數

在 ~/.bashrc (或是你用 zsh 的話 ~/.zshrc) 加上下面幾行：

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

把 ANDROID_HOME 設定成 Android Studio 安裝的路徑，並讓一些 tool 的指令可以在 PATH 找到。

備註：因每個 OS 安裝的方式之間大同小異，會以筆者實際操作的 MacOS 為主，有出入的部分請參考文件 (例如：在 Windows 設定環境變數的方式會有所不同)。

建立專案

首先我們必須安裝 React Native Command Line Tool：

$ npm i -g react-native-cli

推薦安裝 Yarn，它是 Facebook 做的套件管理，做了比較完善的 Cache，可以提升 NPM Package 安裝的速度，大幅縮短安裝時間。

有安裝 Yarn 的話，也可以用它來安裝 Global Package：

$ yarn global add react-native-cli

安裝完後，只要用 react-native init 即可開啟新專案：

$ react-native init <ProjectName>

並會自動地把所有東西都安裝好：

執行 iOS App

只要一行指令，就能看到模擬器跑起來：

$ react-native run-ios

執行 Android App

跟 iOS 稍微不同的是，我們必須先從 AVD Manager 或是 Command Line 去打開 Android Emulator：

// 也可以從 AVD Manager 打開模擬器
$ emulator -avd [your_emulator_name] -gpu on &

$ react-native run-android

筆者對 Android 相當的不熟，手邊也沒有 Android 的手機，所以我要求的不多哈哈。

最後，來個大合照：

大功告成！

結語

雖然 Android 的步驟稍微複雜一點，但當時從來沒寫過 Andorid 也沒裝過 Android SDK、AVD 的筆者，看著文件的流程卻也能只用一個小時左右就能完成了 Hello World，並能修改一些 React 的 Code，我想這就是 React Native 的厲害之處。