claude-skills 实战指南使用 Expo Router 构建 React Native 文件路由与导航体系【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills本篇技术指南以 claude-skills 仓库中 React Native Expert 技能SKILL.md的导航参考文档 expo-router.md 为核心骨架系统讲解基于 Expo Router 的目录结构、Stack/Tabs 布局、编程式导航、受保护路由与深链配置。读者学完后可独立搭建一个带身份鉴权与动态路由的 Expo 应用导航骨架并掌握与 project-structure.md、platform-handling.md 配套使用的工程组织方式与平台适配要点。一、Expo Router 与文件式路由的基本思想Expo Router 是 Expo 官方推荐的、构建在 React Navigation 之上的文件式路由框架。它的核心心智模型是文件即路由app/目录下每一个.tsx文件都对应一个可访问的屏幕地址。这意味着你不再需要手动维护一份路由配置表新增页面就是新增文件删除页面就是删除文件路由结构天然与目录结构一一对应。在 claude-skills 仓库中React Native Expert 技能skills/react-native-expert/SKILL.md的定位是构建、优化并调试跨平台移动应用其核心工作流第 1 步即要求使用 Expo Router 或 React Navigation 进行 Setup并在 SKILL.md 中提示运行npx expo doctor校验 SDK 兼容性。因此理解 Expo Router 的布局体系是使用该技能搭建生产级 React Native 应用的第一步。配套依赖版本参考来自 project-structure.md 的 Essential Dependenciesexpo~50.0.0expo-router~3.4.0react-native-safe-area-context4.8.2react-native-screens~3.29.0react-navigation/native^6.1.0二、Project Structure以 app/ 为根的路由目录Expo Router 的路由目录遵循分组 布局 动态段的约定参考文档给出了一个标准骨架app/ ├── _layout.tsx # Root layout根布局 ├── index.tsx # Home (/) ├── not-found.tsx # 404 page未匹配路由兜底页 ├── (tabs)/ # Tab group圆括号 不参与 URL 路径的分组 │ ├── _layout.tsx # Tab bar config标签栏配置 │ ├── index.tsx # First tab │ └── profile.tsx # Profile tab ├── (auth)/ # Auth group无标签栏的分组 │ ├── _layout.tsx │ ├── login.tsx │ └── register.tsx ├── settings/ │ ├── _layout.tsx # Stack layout栈布局 │ ├── index.tsx # Settings main │ └── notifications.tsx └── details/[id].tsx # Dynamic route动态路由段2.1 特殊文件名的含义_layout.tsx下划线前缀表示这是一个布局文件而非路由页面。它用于渲染该目录下所有页面的公共外壳导航器、Provider 等。文件名中的_layout不会出现在 URL 中。(tabs)、(auth)圆括号分组route groups用于组织代码结构而不改变 URL。(tabs)和(auth)下各自拥有独立的_layout.tsx方便为登录前的页面与登录后的主界面配置完全不同的导航形态。not-found.tsx全局未匹配路由的 404 兜底页任何未定义的路径都会渲染它。details/[id].tsx方括号表示动态段details/123会被匹配到此文件参数id即123。2.2 与整体工程结构的配合在 project-structure.md 中Expo Router 的app/目录被放置在一个 feature-oriented 的工程骨架中app/之外通常还有目录用途app/文件式路由components/ui/可复用 UI 组件components/features/业务功能组件hooks/自定义 Hook如useAuth.tsservices/API、Auth 等服务层stores/Zustand 等状态管理constants/颜色、布局等常量types/TypeScript 类型定义这正是 React Native Expert 技能 SKILL.md 工作流第 2 步 Structure — Feature-based organization基于功能组织代码的落地形态。三、Root Layout根布局与全局导航器app/_layout.tsx是整个应用的导航根。参考文档的完整实现如下// app/_layout.tsx import { Stack } from expo-router; import { ThemeProvider } from react-navigation/native; export default function RootLayout() { return ( ThemeProvider value{colorScheme dark ? DarkTheme : DefaultTheme} Stack screenOptions{{ headerShown: false }} Stack.Screen name(tabs) / Stack.Screen name(auth) / Stack.Screen namedetails/[id] options{{ presentation: modal }} / /Stack /ThemeProvider ); }要点解析Stack作为顶层导航器Expo Router 允许在_layout.tsx中放置Stack、Tabs或Drawer作为该层级的导航容器。根布局使用 Stack 后应用级页面如模态弹层与各分组之间的切换由栈管理。ThemeProvider来自react-navigation/native用于注入colorScheme对应的明暗主题DarkTheme/DefaultTheme是框架提供的预置主题对象。screenOptions{{ headerShown: false }}统一关闭该 Stack 所有屏幕的默认头部。如果你希望在子页面显示自定义头部可以在子布局中重新开启。Stack.Screen显式声明name(tabs)、name(auth)、namedetails/[id]用于按路由名精准配置。例如details/[id]通过options{{ presentation: modal }}将该动态路由以**模态从底部弹出的卡片**形式呈现而不是普通的压栈页面。关于colorScheme的补充说明源码示例中直接引用了colorScheme在实际工程中它通常来自useColorScheme()React Native 内置或useColorScheme()的 React Navigation 包装用于跟随系统深浅色模式切换主题。四、Tab Layout标签栏导航(tabs)分组下的_layout.tsx负责渲染底部标签栏。参考文档给出了带图标的双 Tab 示例// app/(tabs)/_layout.tsx import { Tabs } from expo-router; import { Ionicons } from expo/vector-icons; export default function TabLayout() { return ( Tabs screenOptions{{ tabBarActiveTintColor: #007AFF, headerShown: true, }} Tabs.Screen nameindex options{{ title: Home, tabBarIcon: ({ color, size }) ( Ionicons namehome color{color} size{size} / ), }} / Tabs.Screen nameprofile options{{ title: Profile, tabBarIcon: ({ color, size }) ( Ionicons nameperson color{color} size{size} / ), }} / /Tabs ); }要点解析screenOptions应用于所有 TabtabBarActiveTintColor控制选中态图标/文字颜色此处为 iOS 系统蓝#007AFFheaderShown: true在此处开启页面顶栏与根布局的headerShown: false形成根部关闭、Tab 内开启的层级覆盖关系。Tabs.Screen逐屏配置name对应(tabs)/下的文件名index、profiletitle是标签文字tabBarIcon接收{ color, size }渲染图标。此处使用expo/vector-icons的Ionicons图标库。分组不改变 URL由于(tabs)是圆括号分组最终访问路径仍是/index与/profile而不是/tabs/index。实战建议若在screenOptions中统一配置图标可将tabBarIcon提取为公共函数避免每个Tabs.Screen重复书写。五、Navigation编程式导航、Link 组件与参数传递Expo Router 同时提供命令式 APIrouter与声明式组件Link并统一使用类型安全的参数读取 HookuseLocalSearchParams。参考文档完整覆盖了三者import { router, useLocalSearchParams, Link } from expo-router; // 编程式导航 router.push(/details/123); // Push to stack压入栈 router.replace(/home); // Replace current替换当前 router.back(); // Go back返回 router.canGoBack(); // Check if can go back能否返回 // 携带参数 router.push({ pathname: /details/[id], params: { id: 123, title: Item }, }); // Link 组件声明式 Link href/profile asChild Pressable TextGo to Profile/Text /Pressable /Link // 读取参数 function DetailsScreen() { const { id, title } useLocalSearchParams{ id: string; title?: string }(); return TextDetails for {id}/Text; }要点解析pushvsreplacepush将新路由压入导航栈用户可以返回replace替换当前路由原页面不再在栈中常用于登录成功后的跳转防止用户返回到登录页。对象式push当目标路由是动态路由details/[id]时用pathname指定路由模板用params提供动态段与查询参数。Expo Router 会正确拼装 URL。Link asChildasChild让Link不再渲染自己的默认元素而是将导航行为注入到子组件如Pressable上是自定义可点击容器 导航的标准组合。useLocalSearchParamsT()以泛型方式读取路由参数并得到类型提示。注意title标记为可选?因为id是路径段必然存在而title是查询参数可能缺失。类型安全typed routes在 project-structure.md 的app.json中开启了experiments: { typedRoutes: true }启用后 Expo CLI 会为路由路径生成类型定义href、router.push的参数将获得编译期校验减少手写字符串路径带来的低级错误。5.1 Android 返回键的配套处理Expo Router 基于 React NavigationAndroid 物理返回键的默认行为由导航栈管理。若需要在特定页面拦截返回如存在未保存内容React Native Expert 技能在 platform-handling.md 中提供了BackHandler配套方案useBackHandler(() { if (hasUnsavedChanges) { showDiscardAlert(); return true; // 阻止默认返回行为 } return false; // 允许默认返回 });该技能 SKILL.md 的 MUST DO 清单中也明确要求Handle Android back button in navigation导航实现时不应遗漏。六、Protected Routes基于布局守卫的鉴权路由受保护路由是 Expo Router 最实用的能力之一鉴权逻辑写在布局文件的渲染分支里利用Redirect将未登录用户重定向到登录页。参考文档给出了登录前/登录后两侧的完整守卫// app/(auth)/_layout.tsx import { Redirect, Stack } from expo-router; import { useAuth } from /hooks/useAuth; export default function AuthLayout() { const { user, isLoading } useAuth(); if (isLoading) { return LoadingScreen /; } if (user) { return Redirect href/(tabs) /; } return Stack screenOptions{{ headerShown: false }} /; } // app/(tabs)/_layout.tsx export default function TabLayout() { const { user, isLoading } useAuth(); if (isLoading) { return LoadingScreen /; } if (!user) { return Redirect href/(auth)/login /; } return Tabs.../Tabs; }要点解析布局即守卫(auth)/_layout.tsx中若user已存在则Redirect href/(tabs) /强制跳转到主界面否则渲染登录/注册的 Stack。(tabs)/_layout.tsx中逻辑相反未登录用户一律重定向回/login。isLoading竞态处理鉴权状态初始化期间如从本地存储恢复会话先渲染LoadingScreen占位避免闪屏或误跳转。这与技能参考 storage-hooks.md 中useStorage暴露的loading状态模型一致。/hooks/useAuth路径别名来自 project-structure.md 的tsconfig.jsonpaths配置/*: [./*]工程需同时维护babel.config.js中的module-resolveralias两处保持同步。登录后的会话持久化user状态通常配合 AsyncStorage / MMKV 持久化。参考 storage-hooks.md可使用react-native-mmkv的useMMKVString(user)或自定义useStorageHook 实现重启后仍保持登录。路由守卫的局限布局层守卫只影响导航进入不影响路由树本身的存在性对敏感数据仍需在后端 API 做二次鉴权服务端才是安全边界。七、Deep Linking深链与 App 内路由的统一Expo Router 的深链能力与路由体系天然统一配置好scheme后外部链接myapp://details/123会直接映射到app/details/[id].tsx。参考文档给出的app.json配置// app.json { expo: { scheme: myapp, web: { bundler: metro } } }// Handle: myapp://details/123 // app/details/[id].tsx handles automatically要点解析scheme应用的自定义 URL 协议如myapp://。配置后从邮件、短信、网页等渠道点击该链接即可直达对应路由。自动映射details/[id].tsx是动态路由myapp://details/123打开后由该文件渲染id参数自动解析为123开发者无需额外编写 deep link 解析代码。web.bundler: metro让 Web 端同样使用 Metro 打包保证三端iOS/Android/Web路由行为一致。这也是 Expo Router一个代码库一套路由多端运行理念的体现。深链链路建议生产环境建议同时配置ios.infoPlist如CFBundleURLTypes与android.intentFilters由expo-linking或插件自动生成并将 scheme 统一为唯一值避免与其他应用冲突。以上配置是 Expo 生态标准字段可通过npx expo start后输入u用 Expo Go 实际验证深链跳转。八、Quick Reference组件与 API 速查表参考文档以两张速查表收尾以下完整保留并补充说明ComponentPurpose用途Stack栈导航器页面压栈/出栈Tabs标签导航器底部/顶部标签栏Drawer抽屉导航器侧滑菜单Link声明式导航渲染可点击链接router methodBehavior行为push()入栈可返回replace()替换当前路由不可返回到旧页back()返回上一页dismissAll()关闭全部模态弹层补充说明dismissAll()专门用于清理以presentation: modal打开的一系列页面与根布局中details/[id]的模态配置配合使用。此外Expo Router 还提供router.dismiss()关闭最近一个模态与router.navigate()栈内已存在则复用、否则 push等 API可按需查阅官方路由 API。九、与 React Native Expert 技能的整体协作本参考文档并非孤立存在它是 React Native Expert 技能skills/react-native-expert/SKILL.md导航主题的深潜资料。该技能通过路由表按上下文加载参考文件TopicReference参考文件Load When何时加载Navigationexpo-router.mdExpo Router、tabs、stacks、deep linkingPlatformplatform-handling.mdiOS/Android 代码、SafeArea、键盘Listslist-optimization.mdFlatList、性能、memoStoragestorage-hooks.mdAsyncStorage、MMKV、持久化Structureproject-structure.md项目搭建、架构在实际开发中Expo Router 的导航实现通常需要与以下技能约束协同安全区处理布局尤其自定义头部与底部 Tab需结合SafeAreaView/useSafeAreaInsets处理刘海与 Home Indicator参见 platform-handling.md。列表性能Tab 内若承载长列表按 list-optimization.md 使用FlatListmemouseCallback而非ScrollView技能 MUST NOT 约束之一。表单与键盘登录/注册页需使用KeyboardAvoidingView并区分Platform.OS选择behavior参见 SKILL.md 的示例代码。结语从app/目录结构与_layout.tsx布局体系到编程式导航、布局级鉴权守卫与深链映射Expo Router 让 React Native 应用的导航变得可声明、可维护、可类型安全。结合本仓库 React Native Expert 技能的其他参考文件project-structure.md、platform-handling.md、storage-hooks.md即可拼装出结构清晰、鉴权完备、多端一致的完整导航体系。如需进一步了解该技能的整体工作流与约束请阅读 skills/react-native-expert/SKILL.md。【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 claude-skills 实战指南：使用 Expo Router 构建 React Native 文件路由与导航体系
claude-skills 实战指南使用 Expo Router 构建 React Native 文件路由与导航体系【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills本篇技术指南以 claude-skills 仓库中 React Native Expert 技能SKILL.md的导航参考文档 expo-router.md 为核心骨架系统讲解基于 Expo Router 的目录结构、Stack/Tabs 布局、编程式导航、受保护路由与深链配置。读者学完后可独立搭建一个带身份鉴权与动态路由的 Expo 应用导航骨架并掌握与 project-structure.md、platform-handling.md 配套使用的工程组织方式与平台适配要点。一、Expo Router 与文件式路由的基本思想Expo Router 是 Expo 官方推荐的、构建在 React Navigation 之上的文件式路由框架。它的核心心智模型是文件即路由app/目录下每一个.tsx文件都对应一个可访问的屏幕地址。这意味着你不再需要手动维护一份路由配置表新增页面就是新增文件删除页面就是删除文件路由结构天然与目录结构一一对应。在 claude-skills 仓库中React Native Expert 技能skills/react-native-expert/SKILL.md的定位是构建、优化并调试跨平台移动应用其核心工作流第 1 步即要求使用 Expo Router 或 React Navigation 进行 Setup并在 SKILL.md 中提示运行npx expo doctor校验 SDK 兼容性。因此理解 Expo Router 的布局体系是使用该技能搭建生产级 React Native 应用的第一步。配套依赖版本参考来自 project-structure.md 的 Essential Dependenciesexpo~50.0.0expo-router~3.4.0react-native-safe-area-context4.8.2react-native-screens~3.29.0react-navigation/native^6.1.0二、Project Structure以 app/ 为根的路由目录Expo Router 的路由目录遵循分组 布局 动态段的约定参考文档给出了一个标准骨架app/ ├── _layout.tsx # Root layout根布局 ├── index.tsx # Home (/) ├── not-found.tsx # 404 page未匹配路由兜底页 ├── (tabs)/ # Tab group圆括号 不参与 URL 路径的分组 │ ├── _layout.tsx # Tab bar config标签栏配置 │ ├── index.tsx # First tab │ └── profile.tsx # Profile tab ├── (auth)/ # Auth group无标签栏的分组 │ ├── _layout.tsx │ ├── login.tsx │ └── register.tsx ├── settings/ │ ├── _layout.tsx # Stack layout栈布局 │ ├── index.tsx # Settings main │ └── notifications.tsx └── details/[id].tsx # Dynamic route动态路由段2.1 特殊文件名的含义_layout.tsx下划线前缀表示这是一个布局文件而非路由页面。它用于渲染该目录下所有页面的公共外壳导航器、Provider 等。文件名中的_layout不会出现在 URL 中。(tabs)、(auth)圆括号分组route groups用于组织代码结构而不改变 URL。(tabs)和(auth)下各自拥有独立的_layout.tsx方便为登录前的页面与登录后的主界面配置完全不同的导航形态。not-found.tsx全局未匹配路由的 404 兜底页任何未定义的路径都会渲染它。details/[id].tsx方括号表示动态段details/123会被匹配到此文件参数id即123。2.2 与整体工程结构的配合在 project-structure.md 中Expo Router 的app/目录被放置在一个 feature-oriented 的工程骨架中app/之外通常还有目录用途app/文件式路由components/ui/可复用 UI 组件components/features/业务功能组件hooks/自定义 Hook如useAuth.tsservices/API、Auth 等服务层stores/Zustand 等状态管理constants/颜色、布局等常量types/TypeScript 类型定义这正是 React Native Expert 技能 SKILL.md 工作流第 2 步 Structure — Feature-based organization基于功能组织代码的落地形态。三、Root Layout根布局与全局导航器app/_layout.tsx是整个应用的导航根。参考文档的完整实现如下// app/_layout.tsx import { Stack } from expo-router; import { ThemeProvider } from react-navigation/native; export default function RootLayout() { return ( ThemeProvider value{colorScheme dark ? DarkTheme : DefaultTheme} Stack screenOptions{{ headerShown: false }} Stack.Screen name(tabs) / Stack.Screen name(auth) / Stack.Screen namedetails/[id] options{{ presentation: modal }} / /Stack /ThemeProvider ); }要点解析Stack作为顶层导航器Expo Router 允许在_layout.tsx中放置Stack、Tabs或Drawer作为该层级的导航容器。根布局使用 Stack 后应用级页面如模态弹层与各分组之间的切换由栈管理。ThemeProvider来自react-navigation/native用于注入colorScheme对应的明暗主题DarkTheme/DefaultTheme是框架提供的预置主题对象。screenOptions{{ headerShown: false }}统一关闭该 Stack 所有屏幕的默认头部。如果你希望在子页面显示自定义头部可以在子布局中重新开启。Stack.Screen显式声明name(tabs)、name(auth)、namedetails/[id]用于按路由名精准配置。例如details/[id]通过options{{ presentation: modal }}将该动态路由以**模态从底部弹出的卡片**形式呈现而不是普通的压栈页面。关于colorScheme的补充说明源码示例中直接引用了colorScheme在实际工程中它通常来自useColorScheme()React Native 内置或useColorScheme()的 React Navigation 包装用于跟随系统深浅色模式切换主题。四、Tab Layout标签栏导航(tabs)分组下的_layout.tsx负责渲染底部标签栏。参考文档给出了带图标的双 Tab 示例// app/(tabs)/_layout.tsx import { Tabs } from expo-router; import { Ionicons } from expo/vector-icons; export default function TabLayout() { return ( Tabs screenOptions{{ tabBarActiveTintColor: #007AFF, headerShown: true, }} Tabs.Screen nameindex options{{ title: Home, tabBarIcon: ({ color, size }) ( Ionicons namehome color{color} size{size} / ), }} / Tabs.Screen nameprofile options{{ title: Profile, tabBarIcon: ({ color, size }) ( Ionicons nameperson color{color} size{size} / ), }} / /Tabs ); }要点解析screenOptions应用于所有 TabtabBarActiveTintColor控制选中态图标/文字颜色此处为 iOS 系统蓝#007AFFheaderShown: true在此处开启页面顶栏与根布局的headerShown: false形成根部关闭、Tab 内开启的层级覆盖关系。Tabs.Screen逐屏配置name对应(tabs)/下的文件名index、profiletitle是标签文字tabBarIcon接收{ color, size }渲染图标。此处使用expo/vector-icons的Ionicons图标库。分组不改变 URL由于(tabs)是圆括号分组最终访问路径仍是/index与/profile而不是/tabs/index。实战建议若在screenOptions中统一配置图标可将tabBarIcon提取为公共函数避免每个Tabs.Screen重复书写。五、Navigation编程式导航、Link 组件与参数传递Expo Router 同时提供命令式 APIrouter与声明式组件Link并统一使用类型安全的参数读取 HookuseLocalSearchParams。参考文档完整覆盖了三者import { router, useLocalSearchParams, Link } from expo-router; // 编程式导航 router.push(/details/123); // Push to stack压入栈 router.replace(/home); // Replace current替换当前 router.back(); // Go back返回 router.canGoBack(); // Check if can go back能否返回 // 携带参数 router.push({ pathname: /details/[id], params: { id: 123, title: Item }, }); // Link 组件声明式 Link href/profile asChild Pressable TextGo to Profile/Text /Pressable /Link // 读取参数 function DetailsScreen() { const { id, title } useLocalSearchParams{ id: string; title?: string }(); return TextDetails for {id}/Text; }要点解析pushvsreplacepush将新路由压入导航栈用户可以返回replace替换当前路由原页面不再在栈中常用于登录成功后的跳转防止用户返回到登录页。对象式push当目标路由是动态路由details/[id]时用pathname指定路由模板用params提供动态段与查询参数。Expo Router 会正确拼装 URL。Link asChildasChild让Link不再渲染自己的默认元素而是将导航行为注入到子组件如Pressable上是自定义可点击容器 导航的标准组合。useLocalSearchParamsT()以泛型方式读取路由参数并得到类型提示。注意title标记为可选?因为id是路径段必然存在而title是查询参数可能缺失。类型安全typed routes在 project-structure.md 的app.json中开启了experiments: { typedRoutes: true }启用后 Expo CLI 会为路由路径生成类型定义href、router.push的参数将获得编译期校验减少手写字符串路径带来的低级错误。5.1 Android 返回键的配套处理Expo Router 基于 React NavigationAndroid 物理返回键的默认行为由导航栈管理。若需要在特定页面拦截返回如存在未保存内容React Native Expert 技能在 platform-handling.md 中提供了BackHandler配套方案useBackHandler(() { if (hasUnsavedChanges) { showDiscardAlert(); return true; // 阻止默认返回行为 } return false; // 允许默认返回 });该技能 SKILL.md 的 MUST DO 清单中也明确要求Handle Android back button in navigation导航实现时不应遗漏。六、Protected Routes基于布局守卫的鉴权路由受保护路由是 Expo Router 最实用的能力之一鉴权逻辑写在布局文件的渲染分支里利用Redirect将未登录用户重定向到登录页。参考文档给出了登录前/登录后两侧的完整守卫// app/(auth)/_layout.tsx import { Redirect, Stack } from expo-router; import { useAuth } from /hooks/useAuth; export default function AuthLayout() { const { user, isLoading } useAuth(); if (isLoading) { return LoadingScreen /; } if (user) { return Redirect href/(tabs) /; } return Stack screenOptions{{ headerShown: false }} /; } // app/(tabs)/_layout.tsx export default function TabLayout() { const { user, isLoading } useAuth(); if (isLoading) { return LoadingScreen /; } if (!user) { return Redirect href/(auth)/login /; } return Tabs.../Tabs; }要点解析布局即守卫(auth)/_layout.tsx中若user已存在则Redirect href/(tabs) /强制跳转到主界面否则渲染登录/注册的 Stack。(tabs)/_layout.tsx中逻辑相反未登录用户一律重定向回/login。isLoading竞态处理鉴权状态初始化期间如从本地存储恢复会话先渲染LoadingScreen占位避免闪屏或误跳转。这与技能参考 storage-hooks.md 中useStorage暴露的loading状态模型一致。/hooks/useAuth路径别名来自 project-structure.md 的tsconfig.jsonpaths配置/*: [./*]工程需同时维护babel.config.js中的module-resolveralias两处保持同步。登录后的会话持久化user状态通常配合 AsyncStorage / MMKV 持久化。参考 storage-hooks.md可使用react-native-mmkv的useMMKVString(user)或自定义useStorageHook 实现重启后仍保持登录。路由守卫的局限布局层守卫只影响导航进入不影响路由树本身的存在性对敏感数据仍需在后端 API 做二次鉴权服务端才是安全边界。七、Deep Linking深链与 App 内路由的统一Expo Router 的深链能力与路由体系天然统一配置好scheme后外部链接myapp://details/123会直接映射到app/details/[id].tsx。参考文档给出的app.json配置// app.json { expo: { scheme: myapp, web: { bundler: metro } } }// Handle: myapp://details/123 // app/details/[id].tsx handles automatically要点解析scheme应用的自定义 URL 协议如myapp://。配置后从邮件、短信、网页等渠道点击该链接即可直达对应路由。自动映射details/[id].tsx是动态路由myapp://details/123打开后由该文件渲染id参数自动解析为123开发者无需额外编写 deep link 解析代码。web.bundler: metro让 Web 端同样使用 Metro 打包保证三端iOS/Android/Web路由行为一致。这也是 Expo Router一个代码库一套路由多端运行理念的体现。深链链路建议生产环境建议同时配置ios.infoPlist如CFBundleURLTypes与android.intentFilters由expo-linking或插件自动生成并将 scheme 统一为唯一值避免与其他应用冲突。以上配置是 Expo 生态标准字段可通过npx expo start后输入u用 Expo Go 实际验证深链跳转。八、Quick Reference组件与 API 速查表参考文档以两张速查表收尾以下完整保留并补充说明ComponentPurpose用途Stack栈导航器页面压栈/出栈Tabs标签导航器底部/顶部标签栏Drawer抽屉导航器侧滑菜单Link声明式导航渲染可点击链接router methodBehavior行为push()入栈可返回replace()替换当前路由不可返回到旧页back()返回上一页dismissAll()关闭全部模态弹层补充说明dismissAll()专门用于清理以presentation: modal打开的一系列页面与根布局中details/[id]的模态配置配合使用。此外Expo Router 还提供router.dismiss()关闭最近一个模态与router.navigate()栈内已存在则复用、否则 push等 API可按需查阅官方路由 API。九、与 React Native Expert 技能的整体协作本参考文档并非孤立存在它是 React Native Expert 技能skills/react-native-expert/SKILL.md导航主题的深潜资料。该技能通过路由表按上下文加载参考文件TopicReference参考文件Load When何时加载Navigationexpo-router.mdExpo Router、tabs、stacks、deep linkingPlatformplatform-handling.mdiOS/Android 代码、SafeArea、键盘Listslist-optimization.mdFlatList、性能、memoStoragestorage-hooks.mdAsyncStorage、MMKV、持久化Structureproject-structure.md项目搭建、架构在实际开发中Expo Router 的导航实现通常需要与以下技能约束协同安全区处理布局尤其自定义头部与底部 Tab需结合SafeAreaView/useSafeAreaInsets处理刘海与 Home Indicator参见 platform-handling.md。列表性能Tab 内若承载长列表按 list-optimization.md 使用FlatListmemouseCallback而非ScrollView技能 MUST NOT 约束之一。表单与键盘登录/注册页需使用KeyboardAvoidingView并区分Platform.OS选择behavior参见 SKILL.md 的示例代码。结语从app/目录结构与_layout.tsx布局体系到编程式导航、布局级鉴权守卫与深链映射Expo Router 让 React Native 应用的导航变得可声明、可维护、可类型安全。结合本仓库 React Native Expert 技能的其他参考文件project-structure.md、platform-handling.md、storage-hooks.md即可拼装出结构清晰、鉴权完备、多端一致的完整导航体系。如需进一步了解该技能的整体工作流与约束请阅读 skills/react-native-expert/SKILL.md。【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考