📌 教學目標
-
使用最新工具建立 Expo 專案
-
掌握 EAS Build / Submit / Update 的雲端工作流程
-
適合想快速建立並部署 React Native 應用的開發者
一、什麼是 Expo？
Expo 是一個專為 React Native 打造的開發框架，提供以下優勢：
| 功能 | 說明 |
|---|---|
| ✅ 快速啟動 | 建立專案只需一行指令 |
| 📦 內建 SDK | 相機、定位、推播、深度連結等 |
| ⚙️ 零原生配置 | 無需安裝 Xcode 或 Android Studio |
| 🔁 支援 OTA 更新 | 可直接推送程式碼更新到用戶端（無需重上架） |
二、什麼是 EAS？
EAS（Expo Application Services）為 Expo 的進階雲端工具，提供以下能力：
| 服務 | 用途 |
|---|---|
| 🏗️ EAS Build | 雲端建置 Android/iOS app，不需裝原生環境 |
| 🚀 EAS Submit | 自動提交到 App Store / Play Store |
| 🔄 EAS Update | 即時推送 JavaScript/資源更新（OTA） |
| 🌐 EAS Hosting | 部署 Web 應用 |
| 📈 EAS Insights | 效能與使用分析 |
三、初始化專案（使用 npx create-expo-app@latest）
為什麼使用 @latest？
-
✅ 強制抓取最新模板（含最新 SDK）
-
🛡️ 避免使用本地快取舊版工具
-
💡 預設支援 TypeScript 與 Expo Router
步驟：
# 建立新專案（推薦）
npx create-expo-app@latest my-app
# 進入專案資料夾
cd my-app
# 啟動開發伺服器
npm start
初始化後你可以選擇：
-
blank（空白模板）
-
with-router（內建 Expo Router）
-
with-tabs（底部頁籤導航模板）
四、安裝 EAS 並設定專案
# 全域安裝 EAS CLI
npm install -g eas-cli
# 登入 Expo 帳號
eas login
# 產生 eas.json 設定檔
eas build:configure
這會建立 eas.json，包含不同 build profile（開發 / 測試 / 正式）設定。
五、使用 EAS Build（雲端打包）
# 建置 Android 和 iOS 的開發版（含原生模組）
eas build --platform all --profile development
# 建置正式版
eas build --platform all --profile production
完成後你會獲得下載連結或 QR Code，可直接安裝到裝置測試。
六、使用 EAS Submit（雲端上架）
Android
eas submit --platform android
需先設定 Google Play 的 JSON 憑證（service account）。
iOS
eas submit --platform ios
支援自動產生與管理 Apple 證書（需 Apple ID）。
七、使用 EAS Update（推送 OTA 更新）
可即時推送 JS/資源改動（非原生程式碼）到使用者手機，不需重上架。
初始化：
eas update:configure
推送更新：
eas update --branch production --message "修正首頁排版問題"
App 中啟用自動更新（範例）：
import * as Updates from 'expo-updates';
async function checkForUpdates() {
const update = await Updates.checkForUpdateAsync();
if (update.isAvailable) {
await Updates.fetchUpdateAsync();
await Updates.reloadAsync();
}
}
八、常見專案結構
my-app/
├── app/ # Expo Router 頁面與路由
│ └── index.tsx
├── assets/ # 圖片與資源
├── eas.json # EAS 設定
├── app.config.ts # 動態設定應用參數
├── package.json
└── tsconfig.json
九、建議開發流程（CI/CD 範本）
# 建置 + 更新（每日開發測試）
eas build --profile development --platform all
eas update --branch dev --message "日常測試更新"
# 上架（版本提交）
eas build --profile production --platform all
eas submit --platform all
🔚 總結與資源推薦
✅ 開發者建議：
| 項目 | 建議 |
|---|---|
| 初始化工具 | 使用 npx create-expo-app@latest |
| 建置方式 | 使用 eas build |
| 原生需求 | 轉用 development build 並 eject |
| 即時修正 | 用 eas update OTA 推送 |
| 上架流程 | eas submit 自動處理上傳 |
📚 官方連結：
如需我幫你自動化腳本、CI/CD 配置、或串接 Expo Router，請隨時告訴我！
文章標籤
全站熱搜
Flask (1)