劉老師的跨域創想工坊

📌 Expo Router 是什麼？

Expo Router 是 Expo 為 React Native 應用設計的檔案系統導向（File-based）的導航系統，靈感來自 Next.js。
你只需要在 app/ 資料夾中建立檔案，就能自動對應成應用的頁面與路由。

---

✅ Expo Router 的優勢

特性	說明
⛩️ 檔案即路由	app/index.tsx ➝ /，app/about.tsx ➝ /about
🧭 支援 stack/tab/drawer 導覽	自動配置 Stack, Tabs, Drawer 等常用導覽方式
🌐 可部署為 Web	預設支援 Web 路由（適合一頁式網站、PWA）
🧩 動態與巢狀路由	支援 app/product/[id].tsx, app/settings/account.tsx 等結構化導覽
📦 易於整合	可與 React Navigation 生態系直接搭配

---

🛠️ 如何開始使用 Expo Router

1️⃣ 使用 Expo CLI 建立專案

npx create-expo-app@latest my-app --template with-router
cd my-app

或你也可以手動安裝：

npm install expo-router react-native-safe-area-context react-native-screens

2️⃣ 專案結構

my-app/
├── app/                  ← 所有頁面與路由檔案
│   ├── index.tsx         ← 對應 '/'
│   ├── about.tsx         ← 對應 '/about'
│   └── product/
│       └── [id].tsx      ← 動態路由 '/product/:id'
├── app.config.ts         ← app.json 替代方案
└── package.json

---

📂 基本路由範例

app/index.tsx

import { Text, View } from 'react-native';

export default function Home() {
  return (
    <View>
      <Text>歡迎來到首頁！</Text>
    </View>
  );
}

app/about.tsx

import { Text, View } from 'react-native';

export default function About() {
  return (
    <View>
      <Text>關於我們</Text>
    </View>
  );
}

---

🔀 使用 Link 做導覽

import { Link } from 'expo-router';
import { Text, View } from 'react-native';

export default function Home() {
  return (
    <View>
      <Text>首頁</Text>
      <Link href="/about">前往關於頁</Link>
    </View>
  );
}

---

🧭 自動導航類型支援

✅ Stack 導覽（預設）

只要你在 app/ 下新增 .tsx 檔案，它們就會自動變成 stack navigation 頁面。

✅ Tabs 導覽

在 app/ 中建立 _layout.tsx，回傳 <Tabs> 元件即可：

import { Tabs } from 'expo-router';

export default function Layout() {
  return <Tabs />;
}

並建立子頁面：

app/
├── _layout.tsx         ← Tabs 容器
├── home.tsx            ← Tab 1
└── profile.tsx         ← Tab 2

✅ Drawer 導覽

import { Drawer } from 'expo-router/drawer';

export default function Layout() {
  return <Drawer />;
}

---

🔢 動態與巢狀路由

動態路由

檔名加上中括號，如：

• app/product/[id].tsx ➝ /product/123

import { useLocalSearchParams } from 'expo-router';

export default function ProductDetail() {
  const { id } = useLocalSearchParams();
  return <Text>產品 ID：{id}</Text>;
}

巢狀導覽

app/
└── settings/
    ├── _layout.tsx      ← 為子路由提供 Tabs 或 Stack
    ├── index.tsx        ← /settings
    └── account.tsx      ← /settings/account

---

⚙️ 自訂標題與頁面屬性

使用 expo-router 的 useNavigation 或 useLayoutEffect 設定標題：

import { useNavigation } from 'expo-router';
import { useLayoutEffect } from 'react';

export default function Page() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({ title: '自訂標題' });
  }, [navigation]);

  return <Text>內容</Text>;
}

---

🧪 結合 EAS Build 與 OTA 更新

Expo Router 完全支援 eas build 與 eas update，你可以：

1. 使用 eas build --platform all 建立雲端應用

2. 使用 eas update --branch production 推送新頁面或調整

3. 路由會自動更新，不需重裝 App！

---

📚 常見問題

問題	解法
想整合 Redux/MobX？	正常安裝即可，不受 Router 限制
可以設定深層連結？	可透過 app.config.ts 的 deepLinks 配置
Web 路由也支援？	✅，expo-router 預設為 Web 應用優化

---

✅ 結語

Expo Router 能做什麼？	優勢
建立 iOS/Android/Web 三端共用導覽	✨ 零設定，快速上手
巢狀/動態路由管理複雜導覽架構	🧩 彈性高
搭配 EAS + OTA 更新	🔄 快速部署

---

📎 推薦閱讀：

• 官方文檔 Expo Router

• EAS Build 教學

• 深入 Expo Router 導覽模式

如需我幫你用 Router 架一個完整導覽框架，或加上登入、狀態管理等功能，歡迎接續詢問！