React Native · Expo SDK 52 · 2026

Expo Router — 把文件路由搬进 React Native

Next.js 让 Web 团队告别 React Router。Expo Router 让 RN 团队也拿到同一套心智:一个 app/ 目录,文件即路由,一份代码 iOS/Android/Web 三端共用。本教程 10 章,从 npx create-expo-app 到 EAS 上线,覆盖 Typed Routes、Universal Links、鉴权流程、OTA 更新。

File-based Routing Stack · Tabs · Drawer Typed Routes Universal Links Expo SDK 52 EAS Build/Update iOS · Android · Web
10 章 · 从入门到上线 文件路由 · 三端共用 Typed Routes · OTA

为什么要学 Expo Router

React Native 团队期待的「Next.js 时刻」

假设你熟悉 React、TypeScript,写过基础 React Native。无需 React Navigation 经验——Expo Router 底层就是 React Navigation,理念与 Next.js App Router 一脉相承。

环境要求:Node ≥ 20、Xcode(iOS)、Android Studio 按需。10 章走完,你将掌握从脚手架到 EAS 生产发布的完整链路。

课程大纲

10 章 · 从 create-expo-app 到 EAS 上线

Chapter 01 为什么用 Expo Router React Navigation 的痛点、文件路由的由来、Expo Router v4 在 SDK 52 的新特性。
选型对比概念
 Chapter 02 create-expo-app 起步 npx create-expo-app -t expo-template-default,目录结构拆解,app/_layout.tsx 的角色。
CLI脚手架HelloWorld
 Chapter 03 Stack 导航:最基础的一堆屏 screen options、header、手势返回,与 React Navigation Stack 一一对应。
StackHeaderBack
 Chapter 04 Tabs 与 Drawer 布局 (tabs) 分组、共享底部栏、Drawer + Stack 嵌套。
TabsDrawer嵌套
 Chapter 05 动态路由与参数 [id].tsx、[...slug].tsx、useLocalSearchParams、Typed Routes 类型安全。
动态路由Typed Routes参数
 Chapter 06 鉴权流程与受保护路由 Root Layout 判断登录态、Redirect、分组路由 (auth)/(app)。
AuthRedirect分组
 Chapter 07 Universal Links / Deep Linking iOS Associated Domains、Android App Links、scheme://,一条 URL 打通 App 和 Web。
Deep LinkApp LinksSEO
 Chapter 08 三端共用:Web + Native Metro web、SSR、路由差异处理、Platform-specific 文件 .ios.tsx。
Universal AppWebRN Web
 Chapter 09 EAS Build + OTA Update 从源码到 .ipa/.aab,expo-updates 远程推补丁,不走应用商店也能热更。
EASOTA发布
 Chapter 10 生产案例与最佳实践 大型 App 的路由组织、A/B、埋点、性能、可访问性、错误边界。
最佳实践性能规模