mcpField
E
expo-router

expo-router

github.com/dralgorhythm开发12962 次安装15 周前更新
代码仓库

关于 expo-router

面向 React Native 开发者的 Expo Router 6.x 路由技能，通过 `app/` 目录中的文件构建导航。内容涵盖布局、路由组、动态参数和导航约定。

主要功能

  1. 01将 `app/` 文件映射为导航屏幕
  2. 02设置嵌套布局和路由组
  3. 03创建动态路由与兜底路由
  4. 04导航并读取路由参数
  5. 05处理未找到页面和屏幕选项

适用场景

  1. 01按路由组组织屏幕
  2. 02添加带参数的详情页面
  3. 03配置 Stack 或 Tab 导航
  4. 04设置共享 Provider 和 404 页面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill expo-router

安装后在 Claude Code 中输入/expo-router确认已加载。

详细介绍

Expo Router

概述

使用 Expo Router 6.x 为 React Native 实现基于文件的路由。将 app/ 目录中的文件系统结构映射到导航屏幕。支持 Stack 和 Tab 导航器、路由组、动态参数和嵌套布局。

安装：已包含在 Expo SDK 54+ 中。请确保依赖项中包含 expo-router。

工作流

设置路由：

  1. 创建 app/_layout.tsx 作为根布局（提供程序、全局界面元素）
  2. 创建路由组目录：app/(demo)/、app/(auth)/
  3. 在每个组中添加 _layout.tsx，用于配置组专属导航
  4. 添加 index.tsx 作为默认屏幕
  5. 添加 [param].tsx 作为动态路由
  6. 添加 +not-found.tsx 处理 404

添加新屏幕：

  1. 在合适的路由组中创建文件
  2. 导出默认 React 组件
  3. 在父级 _layout.tsx 中配置屏幕选项，或通过 <Stack.Screen options={...} /> 配置
  4. 使用 useRouter() 或 <Link> 进行导航

指南

文件约定
文件用途
_layout.tsx目录的布局封装（提供程序、导航器）
index.tsx目录的默认屏幕
[param].tsx动态路由段
[...catchAll].tsx全匹配路由
+not-found.tsx404 屏幕
(group)/路由组（不包含 URL 路径段）
根布局模式

根目录中的 _layout.tsx 是入口点。可在其中设置全局提供程序：

app/_layout.tsx → GestureHandlerRootView > SafeAreaProvider > Context > Stack

保持根布局精简——将界面元素（标签栏、标题栏）放入组布局中。

路由组

路由组 (name)/ 可整理屏幕，同时不影响 URL 路径。常见模式：

app/
├── _layout.tsx          # Root: providers + Stack
├── (demo)/
│   ├── _layout.tsx      # Tabs or Stack for demo scenes
│   ├── index.tsx        # Home screen
│   └── [id].tsx         # Detail screen
└── +not-found.tsx
导航
  • 命令式：const router = useRouter() → router.push('/detail/123')、router.back()
  • 声明式：<Link href="/detail/123"> 组件
  • 参数：const { id } = useLocalSearchParams<{ id: string }>()
  • 重定向：使用 <Redirect href="/login" /> 实现条件路由
屏幕选项

通过布局或内联方式配置屏幕呈现：

  • 在布局中：<Stack.Screen name="detail" options={{ title: 'Detail', headerShown: false }} />
  • 内联：<Stack.Screen options={{ presentation: 'modal' }} />
  • 常用选项：title、headerShown、presentation（'card' | 'modal'）、animation
布局嵌套

在根布局中嵌套提供程序，在组布局中放置界面元素：

  • 根目录的 _layout.tsx：GestureHandlerRootView、SafeAreaProvider、主题上下文、<Stack />
  • 组目录的 _layout.tsx：配置屏幕选项和标题栏的 <Tabs /> 或 <Stack />

最佳实践

  • 保持路由文件精简——将工作委派给 /components/views/ 中的视图组件
  • 使用路由组划分职责，同时不影响 URL
  • 使用泛型为路由参数指定类型：useLocalSearchParams<{ id: string }>()
  • 使用自定义标题栏时设置 headerShown: false
  • 使用 <Stack screenOptions={{ animation: 'slide_from_right' }} /> 以统一转场效果
  • 将共享提供程序（主题、数据上下文）放在根目录的 _layout.tsx 中
  • 使用 +not-found.tsx 优雅地处理 404

反模式

  • 在路由文件中放置业务逻辑（保持文件精简，并将工作委派给组件）
  • 将路由组嵌套超过 2 层
  • 直接使用 React Navigation，而不使用 Expo Router 抽象
  • 在复杂应用中将导航路径硬编码为字符串，却没有使用常量文件
  • 忘记在路由文件中导出默认组件（会导致屏幕空白）
  • 将本应放在根布局中的提供程序放入组布局

评论

支持 Markdown