手機 App：
iOS + Android 全包

三條路怎麼選

還有 Flutter（Dart）、Capacitor（Web 包成 App）、Tauri（桌面為主）。但接案 / 個人最強組合是會 RN + 略懂 Kotlin/Swift。

React Native + Expo

npx create-expo-app my-app
cd my-app
npx expo start
# 手機裝 Expo Go App，掃 QR 直接看

// app/index.tsx（Expo Router）
import { View, Text, Button, FlatList } from 'react-native';
import { useState } from 'react';

export default function Home() {
  const [todos, setTodos] = useState([]);

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24 }}>待辦事項</Text>
      <FlatList
        data={todos}
        keyExtractor={item => item.id}
        renderItem={({ item }) => <Text>{item.text}</Text>}
      />
      <Button title="新增" onPress={() => setTodos([...todos, { id: Date.now(), text: '新事項' }])} />
    </View>
  );
}

跟 Web React 差在哪

• 沒有 div，用 <View>
• 沒有 p，文字一律包 <Text>
• 沒有 CSS 檔，用 inline style object 或 StyleSheet
• 沒有 click，用 onPress
• 列表用 FlatList（虛擬化效能好）

常用套件

• expo-router：檔案路由
• expo-image-picker：相機 / 相簿
• expo-notifications：推播
• expo-location：GPS
• expo-secure-store：加密儲存（不要把 token 放 AsyncStorage）
• nativewind：在 RN 用 Tailwind 寫 style

上架

# 用 EAS Build（Expo 雲端打包）
npx eas-cli build --platform ios
npx eas-cli build --platform android
npx eas-cli submit

不用 Mac 也能 build iOS。

Android 原生：Kotlin + Jetpack Compose

Kotlin = Google 官方欽定的 Android 開發語言（取代 Java）。Jetpack Compose = 現代宣告式 UI（類似 React）。

裝 Android Studio

到 developer.android.com 下載 Android Studio。內含 Kotlin compiler、emulator、SDK。

// MainActivity.kt
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CounterScreen()
        }
    }
}

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    Column(modifier = Modifier.padding(24.dp)) {
        Text("計數: $count", fontSize = 24.sp)
        Button(onClick = { count++ }) {
            Text("+")
        }
    }
}

Android 生態關鍵字

• Activity：一個畫面
• Fragment：可重用的子畫面（Compose 後較少用）
• ViewModel：管畫面的狀態與業務邏輯
• Room：本地 SQLite 資料庫的 ORM
• Hilt：依賴注入
• Coroutine + Flow：非同步
• Material 3：Google 設計系統
• Gradle：build 工具（KTS 寫設定）

權限

AndroidManifest.xml 宣告 + runtime 申請（Android 6+）：

val launcher = rememberLauncherForActivityResult(
    ActivityResultContracts.RequestPermission()
) { granted -> if (granted) openCamera() }
launcher.launch(Manifest.permission.CAMERA)

上架 Play Store

1. 產 release AAB（Android App Bundle）
2. 簽名（Play App Signing）
3. 到 Play Console 上傳
4. 填店面資訊、隱私權政策、目標年齡
5. 送審（通常幾小時～幾天）

iOS 原生：Swift + SwiftUI

Swift = Apple 官方語言。SwiftUI = 跟 Compose 對標的宣告式 UI。需要 Mac（Apple 沒給 Windows / Linux 開發 iOS 的選擇）。

import SwiftUI

struct ContentView: View {
    @State var count = 0

    var body: some View {
        VStack(spacing: 20) {
            Text("計數: \(count)")
                .font(.title)
            Button("+") {
                count += 1
            }
        }
        .padding()
    }
}

iOS 生態關鍵字

• Xcode：開發環境（Mac only）
• UIKit：舊的 UI 框架（仍多數產品在用）
• SwiftUI：新框架（2019+，現在主推）
• Combine：響應式（被 async/await 部分取代）
• Core Data：本地資料庫
• HIG（Human Interface Guidelines）：必讀
• TestFlight：beta 測試發布

上架 App Store

1. App Store Connect 建立 App record
2. Xcode → Archive → 上傳
3. 填店面資訊、隱私標籤（很嚴）
4. 送審（1~3 天，可能被退）

共通：推播、IAP、深度連結

推播（Push Notifications）

• iOS：APNs（Apple Push Notification service）
• Android：FCM（Firebase Cloud Messaging）
• 跨平台統一：用 Firebase / OneSignal / Expo Push
• 記得取得權限（iOS 必須使用者主動同意）

IAP（In-App Purchase）

• 數位商品（訂閱、虛擬幣、解鎖功能）必須用平台 IAP（Apple/Google 抽 15~30%）
• 實體商品 / 服務可以走外部金流（Stripe、藍新）
• RN：react-native-iap 或 RevenueCat（推薦，費用 1%）

Deep Link / Universal Link

讓 https://example.com/post/42 在裝有 App 時打開 App。

App 設計建議

• iOS 跟 Android 不要長一樣：每平台有 native pattern（iOS 底部 tab、Android 頂部 app bar）
• 處理離線狀態：手機隨時會斷網。show offline indicator、cache 資料
• Touch target 至少 44pt（iOS HIG）/ 48dp（Material）
• 支援 Dark Mode：使用者預期
• Onboarding ≤ 3 步
• 不要動不動就要登入：先讓使用者體驗，再要註冊