文章目錄
- 核心定義
- 核心理念
- 核心功能解析（Features）
- 1. Native
- 2. Shareable
- 3. Offline-first
- 4. Optimized
- 5. Iteration
- 6. Universal
- 7. Discoverable
- 總結
- 示例：頁面結構如何變成導航？
原文：https://docs.expo.dev/router/introduction/
這段文檔介紹了 Expo Router 的功能和特點。這是一種基于文件結構的導航方式，類似于 Web 里的 Next.js 或 Remix 的路由系統，但用于 React Native + Web 多端統一開發。
下面我將逐段解釋它的含義，幫你理解核心概念和實際用途。
核心定義
Expo Router is a file-based router for React Native and web applications.
解釋：
Expo Router 是一個 基于文件系統的路由解決方案，用于 React Native，同時支持 Web 應用。你創建的頁面文件（.tsx 文件）本身就自動成為導航路由。
It allows you to manage navigation between screens in your app, allowing users to move seamlessly between different parts of your app’s UI, using the same components on multiple platforms (Android, iOS, and web).
解釋：
它基于同一個代碼結構（頁面和組件），實現多端（iOS / Android / Web）的一致導航體驗。你寫一次頁面，在不同平臺通用。
核心理念
It brings the best file-system routing concepts from the web to a universal application — allowing your routing to work across every platform. When a file is added to the app directory, the file automatically becomes a route in your navigation.
解釋：
- 類似 Next.js 的自動路由：你在
app/目錄下新建一個settings.tsx文件，這個頁面就能通過/settings訪問。 - 不再需要手動注冊
Stack.Screen或Tab.Screen。 - 通過文件結構來定義導航結構，更直觀易維護。
核心功能解析（Features）
1. Native
Built on top of our powerful React Navigation suite…
解釋：
- Expo Router 是建立在
react-navigation基礎上的。 - 所以你熟悉的棧導航、底部 Tab、Drawer 全部支持。
- 但 Expo Router 抽象了一層，讓你不再需要手動管理
<Stack.Screen>等配置。
2. Shareable
Every screen is automatically deep linkable…
解釋：
- 每個頁面都自動支持 深度鏈接（Deep Link）。
- 比如你可以通過一個鏈接打開某個特定頁面：
myapp://settings/profile - 也可以用于 Web 上的鏈接分享：
https://yourapp.com/settings
3. Offline-first
Apps are cached and run offline-first…
解釋：
- 構建出的 App 是默認離線可運行的。
- 支持 Expo 的更新機制（
expo-updates），即使用戶沒有網絡也能進入 App，等有網絡時自動更新。 - 所有的 URL 路由解析也不依賴后端服務器。
4. Optimized
Routes are automatically optimized…
解釋：
- 頁面是 懶加載 的：即用戶不訪問，頁面組件就不會加載，提高性能。
- 開發環境下也使用 延遲打包，提高編譯速度。
- 這對大型 App 尤其重要。
5. Iteration
Universal Fast Refresh…
解釋：
- 所有平臺都支持 Fast Refresh（熱重載），保持快速開發體驗。
- “artifact memoization” 是構建優化的一部分，避免每次構建都全量編譯，提升速度。
6. Universal
Android, iOS, and web share a unified navigation structure…
解釋：
-
一個統一的路由系統，支持三端共享。
-
如果某些頁面需要平臺特定邏輯，也可以在每個 route 頁面里加平臺判斷，如：
import { Platform } from 'react-native';
7. Discoverable
Build-time static rendering on web, and universal linking to native…
解釋：
- Web 端可以預渲染（Static Site Generation，SSR/SSG），對 SEO 友好。
- 原生 App 支持通用鏈接（Universal Links / Android App Links），也就是說你可以通過網頁鏈接喚起 App 中的具體頁面。
總結
Expo Router = 基于文件結構的路由系統，讓你像寫 Web 那樣開發原生 App（iOS / Android / Web）頁面導航。
它的核心優勢在于：
- 自動注冊路由
- 路由即目錄結構
- 深度鏈接、跨平臺統一、懶加載優化
- 原生 + Web 都適配
示例：頁面結構如何變成導航？
📁 app/┣ 📄 index.tsx → /┣ 📁 settings/┃ ┣ 📄 index.tsx → /settings┃ ┗ 📄 profile.tsx → /settings/profile┣ 📄 about.tsx → /about
你訪問 /settings/profile，就會自動加載 app/settings/profile.tsx 文件。不需要手動寫 Stack.Screen！
)