SuperAPI AI 工具集

expo-router

前端与建站

查看项目

更新于 10-16 05:06

技能介绍

Expo Router 6.x 为 React Native 提供基于文件系统的路由,把 app/ 目录结构映射为导航屏幕,支持 Stack 与 Tab 导航器、路由组、动态参数和嵌套布局。随 Expo SDK 54+ 提供,需确保 expo-router 位于 dependencies。

用途:搭建导航、创建屏幕、处理路由参数、组织应用布局。

文件约定:_layout.tsx 为目录的布局包装(提供者、导航器);index.tsx 为默认屏幕;[param].tsx 为动态路由段;[...catchAll].tsx 为全捕获路由;+not-found.tsx 处理 404;(group)/ 为不影响 URL 的路由组。

根布局:app/_layout.tsx 是入口,用于全局提供者,结构为 GestureHandlerRootView > SafeAreaProvider > Context > Stack;保持根布局精简,把标签栏、头部等外壳下沉到组布局。

导航方式:编程式用 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。

最佳实践:路由文件保持精简,委托给 /components/views/ 中的视图组件;用路由组分离关注点且不影响 URL;用泛型标注路由参数;自定义头部时设 headerShown: false;用 <Stack screenOptions={{ animation: 'slide_from_right' }} /> 保持过渡一致;共享提供者放在根 _layout.tsx;用 +not-found.tsx 处理 404。

应避免:在路由文件中放业务逻辑;路由组嵌套超过两层;绕过 Expo Router 直接用 React Navigation;复杂应用中硬编码导航路径字符串;忘记默认导出导致白屏;把应在根布局的提供者放进组布局。

限制:资料未提供版本兼容细节、平台差异、性能数据与收费信息。