React Native / Expo 介紹

Ann Chou

發佈於程式學習日記

2025/04/23 更新2025/04/19 發佈閱讀 5 分鐘

本篇主題是 React Native 小介紹。

因為先前在測試 Ionic + PWA 開發，對相機功能實在太失望，結果現在我開始用 React Native / Expo 了。

如果還不清楚 Ionic 和 Reac Native 能做不同種類的 App，可以先閱讀 App 種類概述。

▍ React Native & Expo 概述

React Native 是一個由 Facebook 開發的開源框架，讓開發者可以使用 JavaScript（通常是搭配 React）來開發原生 iOS 和 Android App。它會將 JS/React 程式碼轉換為原生的 UI 元件。
Expo 是一個基於 React Native 的應用程式開發平台，提供即時預覽（Expo Go）和線上建置（EAS build）、原生模組功能（推播、相機、GPS）等好用功能。

▍ 建立專案

開啟 VS code 終端機輸入安裝指令

npx create-expo-app@latest

接著會有一連串問題，回答完畢後專案建置完成

- Ok to proceed? (y)  y
- Creating an Expo project using the default template. // 預設使用default模板

// 提示如果要使用模板指令 -- 在 template 打上名稱
To choose from all available templates pass in the --template arg:
  $ npx create-expo-app --template

To choose from all available examples pass in the --example arg:
  $ npx create-expo-app --example

建立專案後可至 app.json 修改資料

slug 命名建議

可以把 slug 想成是 GitHub Repo 名稱或代號

英文小寫
不含空格或特殊符號（可用 - 或 _）
保持簡潔易識別

▍啟動專案

1.　確保手機和電腦在相同網路環境。

2.　VS code 終端機輸入

npx expo start

終端機將出現 QRcode 和 Web localhost 網址，localhost 網址可直接點擊預覽，但有些功能只支持在手機上看。

3.　手機安裝 Expo Go App（Android / iOS）

4.　Android 使用 Expo Go App，iOS 使用相機掃描終端機上的 QRcode，就能開啟預覽。只要程式碼改變，App 上的畫面也會跟著變化。

或者你也可以安裝 Expo Orbit，在電腦預覽 Android 和 iOS 運行。

▍Build 專案

開發者可以使用 EAS 做線上 build 和發布到 App 平台，是個很方便的工具。

使用 EAS 並不是必要的，這關乎到你開發項目中是否有 EAS 無法編譯的功能，例如推播功能若串接 Firebase，就無法用 EAS 編譯。

先進入 EAS 註冊帳號
回到 VS code 終端機

eas login // 登入
eas build:configure  // 編譯至expo eas 雲端

檢查 EAS 網站上的編譯進度
EAS 編譯完成後會提供一個預覽網址，使用 Expo Go 開啟

▍React Native / Expo Workflow

因為在 Build 專案的段落有提到無法用 EAS 編譯的情境，所以也來介紹 Expo 的 Workflow 吧。

原本的 Expo 是沒有 android 或 ios 資料夾的，但 Firebase 需要經過額外設定流程，所以必須透過 npx expo prebuild 將 workflow 切換至 Bare Workflow，此時便會依照你目前開發電腦的系統在專案中產生 android 或 ios 資料夾。而未來要測試這個推播功能，也無法使用 Expo 原生提供的辦法測試，之後再寫一篇新文介紹推播。

如果你有其中一項功能是必須透過非 EAS build 的方式執行，其他功能也還是可以用 EAS build 做測試！只是 EAS 無法 build 出那些要使用 android 或 ios 資料夾的功能而已。而 Android Studio、Xcode 等非 EAS 方法是可以 build 出完整功能的。