iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 5
2
Modern Web

使用 Modern Web 技術來打造 Native App系列 第 5

Day 05:準備 React Native 開發環境

  • 分享至 

  • xImage
  •  

本篇目的

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

準備 iOS 開發環境

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

mac

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

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

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

xcode

準備 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

sdk

勾選 Android 6.0 (Marshmallow)

detail

勾選右下方的 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

6

接著來到 SDK Tools 的 Tab:

勾選右下方的 Show Package Details checkbox,並選擇:

  • Android SDK Build-Tools 23.0.1

6-dev

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

4. AVD (Android Virtual Device)

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

$ android avd

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>

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

i

執行 iOS App

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

$ react-native run-ios

run-ios

執行 Android App

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

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

$ react-native run-android

anapp

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

最後,來個大合照:

all

大功告成!

結語

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


上一篇
Day 04:Learn Once, Write Anywhere 平台的狂想
下一篇
Day 06:React Native 入門
系列文
使用 Modern Web 技術來打造 Native App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言