第一卷 - 環境


React Native 之旅 01

框架來來去去,新新舊舊,但往往只是一期一會。



[抱歉聲明] 我寫的這系列 React Native 文章中, 不支援 widnow 作業系統的人。 因為我是用 Mac, 所以寫的內容也不會考慮到 windows 作業系統的狀況。


風水輪流轉,需求天天改,Framework 一季換一個。我也到了需要看 React 的時候了… 不過這次竟然是 React Native. 想要把一件事情做好,除了本身想做之外,擁有適當的環境也很重要。 所以這篇,先介紹安裝環境。


基本上現代的開發環境我都覺得很複雜,東裝西裝的,我不會詳述所有需要安裝的項目,因為這要講講不完,若你的電腦漏了什麼相依性套件或是工具 (如版本控制 git 等等),麻煩先行 google 一下。

官方文件

Mac 上安裝環境

  1. 你作業系統要是 OS X
  2. 在 Mac 上安裝 xcode (如果你是用 mac 你應該知道怎麼裝, 開 AppStore)。
  3. 安裝 node (node 是裝 nvm,並且把版本切換到 4.0 以上),若你不知道 nvm 怎麼裝,要 google 一下。
  4. 使用 Homebrew 安裝 watchman(開發過程中監控你的程式有沒有 bug), flow (不需要使用的話可以不用裝)。
brew install watchman
brew install flow

開發 IOS 上的 Setup

開發 Android 上的 Setup


  1. 首先你要有 git (我預設大家有…)
  2. 使用 homebrew 安裝 Android SDK.
brew install android-sdk

裝好之後 Terminal 會有類似訊息:

Now run the 'android' tool to install the actual SDK stuff.

The Android-SDK is available at /usr/local/opt/android-sdk

You may need to add the following to your .bashrc:
export ANDROID_HOME=/usr/local/opt/android-sdk

Bash completion has been installed to:
/usr/local/etc/bash_completion.d

NOTE: You need to restart the Command Prompt (Windows) / Terminal Emulator (Mac OS X, Linux) to apply the new Environment variables.` - (React Native)[https://facebook.github.io/react-native/docs/android-setup.html]


Android SDK 設定

$ android

需要檢查一下以下項目: (自己對一下我就懶得畫框框了 XD)

然後按下 “Install Package”. 如果你像我一樣勾太多… 那可能要裝很久…。

Alt text

官方有勾起來一個 Local Maven Repository… 但是我找不到,參考: https://github.com/facebook/react-native/issues/2796。

按下 install 後會看到這個畫面,你要隨便點一個右邊的 list,然後再右欄,按下 “Accept”. Alt text

需要裝蠻久的…。


關於 Android 模擬器…

  1. (optional) 安裝 Genymotion,但是他是 personal use. 而且需要 VirtualBox. 這套聽我寫 Android 的朋友說很厲害,但我沒有用過。

  2. 模擬器你可以安裝 AVD (Android Virtual Device). 安裝 AVD 的話你可以透過 android 指令,再次開啟剛剛那個畫面,勾選 Intel x86 Atom System Image (for Android 5.1.1 - API 22), Intel x86 Emulator Accelerator (HAXM installer),然後安裝。

因為 Intel x86 Atom System Image 我裝過了,所以這裡截圖只有看到 Intel x86 Emulator Accelerator。 XD

你需要知道一下你安裝的 Intel x86 Emulator Accelerator 是哪個版本哦! 因為待會開啟 AVD 是需要透過 cli,其中會需要知道 Intel x86 Emulator Accelerator HAXM 的版本。像我是 6.0.1。

Alt text

是 Mac 電腦需要手動安裝一下這個東西:

cd /usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager

Alt text

open IntelHAXM_<version>.dmg

Alt text

安裝好之後,我們為 React Native 建立一個虛擬裝置:

  1. 開啟 AVD
android avd 
  1. 按下 “create”,按照官網的填法,建立一個 reactnative 的 AVD:

(注意哦,Use Host GPU 要勾選。)

Alt text

Alt text

看到這個畫面就ok啦!

Alt text


創用 CC 授權條款
React Native 學習之旅winwu製作,以創用CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款釋出。