react-native-navigation（ReactNative导航技能）Skill 如何实现导航？

ReactNative导航技能Skill：让 AI 一次写对 React Navigation 导航代码

• 一个专注导航的 AI 技能：react-native-navigation 聚焦 React Navigation 这一 React Native 事实标准导航库，覆盖堆栈导航、标签导航、抽屉导航、深度链接与常见导航模式。
• 不只给代码，还给规范：技能内置「最佳实践」与「反模式」两部分内容，能在生成代码的同时提醒类型安全、navigate 与 replace 误用、Android 返回键处理等高频坑点。
• 可直接操作项目：该技能被允许使用读取、写入、编辑、Bash、Grep、Glob 等工具，意味着它可以读你的项目结构、改你的文件、跑依赖安装命令，而不是只在对话框里贴一段示例。
• 自动触发型技能：根据技能信息，该技能「用户可调用」为否，属于在相关任务中被自动启用的能力型技能，不需要你每次手动点名。
• 适合谁：正在用或准备用 React Native + React Navigation 做 App 的前端/移动端开发者，尤其是刚接手项目、需要快速理清导航分层与类型定义的人。

该技能叫什么？如何一键安装 AI 技能提升开发效率？

技能基本信息

项目	内容
中文名	ReactNative导航技能Skill
英文名	react-native-navigation
技能 ID	14187
技能定位	在使用 React Navigation 于 React Native 应用中实现导航时使用
是否支持用户主动调用	否（自动触发型）
允许使用的工具	读取、写入、编辑、Bash、Grep、Glob

它到底解决什么问题？

React Native 的页面跳转不是「加个链接」那么简单。一个稍微正式的 App 通常要同时处理：堆栈导航的页面入栈出栈、底部标签的选中态与图标切换、抽屉导航的手势依赖、深链接从外部唤起指定页面、登录前后两套路由的切换、Android 物理返回键的拦截、以及 TypeScript 下 route.params 的类型推导。这套东西散落在多份官方文档和无数篇博客里，新手容易写出「能跑但不规范」的代码，老手也常在小细节上翻车。

react-native-navigation 技能把这些知识压缩成一份可执行的规范：它知道该装哪些包（@react-navigation/native、react-native-screens、react-native-safe-area-context，以及按导航类型追加的 @react-navigation/native-stack、@react-navigation/bottom-tabs、@react-navigation/drawer 等），知道参数列表该怎么声明，知道哪些写法是反模式。

一键安装的思路与步骤

所谓「一键安装 AI 技能」，本质是把一份沉淀好的领域知识挂载到你的 AI 编程助手上，让它在遇到对应任务时自动调用，而不是每次从零描述背景。通用流程如下（具体入口、命令、是否需要账号或付费，以官方说明为准）：

1. 确认前提：你的 AI 编程助手支持「技能 / Skill」机制，且当前项目是 React Native 工程（或即将创建），本地已具备 Node.js 与包管理器环境。
2. 进入技能库：打开你所使用平台的技能市场或技能管理页面。
3. 检索技能：用英文名 react-native-navigation 或技能 ID 14187 搜索，避免同名混淆。
4. 安装并启用：点击安装/启用，确认该技能对当前工作区生效。
5. 验证是否生效：在对话中提出一个具体导航需求，例如「用 React Navigation 搭一个底部三个标签、每个标签内各自嵌套堆栈导航的结构，并写好 TypeScript 参数类型」。如果技能已生效，回答应当结构清晰、直接给出依赖安装命令、参数列表定义、导航器组合代码，并主动提示类型安全写法——而不是给一段含糊的伪代码。
6. 注意触发方式：由于该技能不支持用户主动调用，你通常不需要（也未必能）手动「@」它，正常描述任务即可；如果连续几次都没有被启用，请回到技能管理页确认启用状态，具体排查方式以官方说明为准。

该技能的主要功能和特点

• 三种主流导航形态全覆盖：堆栈导航（最常见的页面推入/返回）、底部标签导航（主入口切换，含 tabBarIcon、选中/未选中颜色配置）、抽屉导航（含 react-native-gesture-handler 与 react-native-reanimated 依赖提醒）。
• 基础骨架一次性搭好：从 NavigationContainer 包裹、createNativeStackNavigator 创建、到 Stack.Screen 注册页面，给出可直接粘贴运行的最小闭环。
• 类型安全导航：强调先定义 RootStackParamList，再用 NativeStackScreenProps 推导页面 props，并通过 declare global 扩展 ReactNavigation.RootParamList，让 navigation.navigate 与 route.params 都获得完整类型检查——这是普通「让 AI 随便写段导航」最容易缺失的一环。
• 深度链接配置：给出 linking 对象的写法，包含 prefixes（如自定义 scheme 与 https 域名）与 config.screens 的路径映射（如 details/:itemId），让外部链接能直达内页。
• 常见业务模式内置：认证流程（登录前后切换两套路由）、模态呈现（presentation: 'modal' 分组）、导航守卫（未登录时 replace 到登录页）、自定义标签栏（完全接管 tabBar 渲染）。
• 标题与导航栏定制：screenOptions 统一设置 headerStyle、headerTintColor、headerTitleStyle，也支持用 useLayoutEffect + navigation.setOptions 做动态标题与右上角按钮。
• 嵌套导航器：演示「标签套堆栈」这一真实项目中最常见的组合方式，避免出现导航器互相嵌套却找不到页面的问题。
• 反模式清单：明确指出四类典型错误——useEffect 缺少依赖导致重复导航、用 navigate 代替 replace 造成堆栈堆积、用 any 放弃类型安全导致路由名拼写错误无法被发现、忘记处理 Android 物理返回键。
• 能读写项目：凭借读取、写入、编辑、Bash、Grep、Glob 权限，它可以先扫描你的目录结构再动手改文件，而不是凭空生成一份与项目风格不符的代码。

和普通工具比强在哪？ 搜索引擎给你的是「十个博客十种写法」，通用大模型给你的是「看起来对但缺类型、缺依赖、缺边界处理」的代码；而这个技能给的是「依赖装什么、类型怎么声明、代码怎么写、哪些写法别碰」的成套方案。

如何使用该技能？

第 1 步：用自然语言描述项目现状与目标

不需要念咒语式地调用技能，说清三件事即可：项目现状、目标导航结构、约束条件。示例：

我的 React Native 项目现在只有一个页面。请帮我搭好导航：底部三个标签（首页、搜索、我的），首页标签内部再嵌套堆栈导航，可以从首页跳到详情页并传 itemId 和 title 两个参数，全部用 TypeScript。

第 2 步：让它先给出依赖安装清单

技能会按导航类型给出对应命令，例如基础包与堆栈导航：

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

# 需要底部标签时
npm install @react-navigation/bottom-tabs

# 需要抽屉导航时
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

如果你只做堆栈导航，就不必引入抽屉相关的两个原生依赖，这一点技能会区分对待。

第 3 步：确认参数列表与导航器骨架

先让类型定义落地，再写页面，能省掉大量返工。典型输出形如：定义 RootStackParamList，把 Home 设为 undefined、Details 设为 { itemId: string; title: string }，然后用 createNativeStackNavigator<RootStackParamList>() 创建导航器，最外层用 NavigationContainer 包裹。

第 4 步：编写页面内的跳转与取参

技能给出的标准写法是：首页通过 navigation.navigate('Details', { itemId: '123', title: '我的项目' }) 跳转，详情页通过 route.params 解构取参，并用 navigation.goBack() 返回。整个过程 route.params 都是强类型的，拼错字段名会直接报错。

第 5 步：按需追加进阶能力

需要外部唤起就补深度链接：

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Details: 'details/:itemId',
    },
  },
};

需要模态页面就用分组加 screenOptions={{ presentation: 'modal' }}；需要登录拦截就让守卫在未认证时执行 navigation.replace('SignIn')。

第 6 步：让它顺手做一次代码体检

可以让技能扫描现有导航代码，检查是否存在反模式，例如 useEffect 里无依赖地 navigate、该 replace 却用了 navigate、页面 props 用 any、以及 Android 侧是否注册了 BackHandler 监听。这一步往往比从零生成更有价值。

同类型竞品对比分析

方案名称	定位	核心功能	安装/使用门槛	适用场景	优势与不足
react-native-navigation（本技能）	导航领域的专用 AI 技能	堆栈/标签/抽屉导航、深度链接、认证流程、模态、守卫、类型安全、反模式纠错	需在支持技能机制的平台启用，启用后自然语言描述需求即可	新建导航骨架、改造旧导航、排查导航问题	优势：成套规范、含类型与坑点、可直接改文件；不足：仅覆盖 React Navigation 生态，不支持主动调用
通用 AI 编程助手（未启用技能）	通用代码生成	能写各类代码，但导航细节依赖模型自身记忆	无需安装	简单页面跳转、零散问题	优势：门槛最低；不足：常漏依赖包、缺参数类型、容易写出反模式
官方文档 + 手动编码	权威参考	完整 API 说明与示例	需自行检索、理解、拼装	学习原理、查具体 API	优势：最准确、最权威；不足：信息分散，从读到写完仍需大量时间
Expo Router 等文件路由方案	另一种导航范式	以文件目录约定路由，自动生成导航结构	需项目采用对应框架	新项目、希望减少导航样板代码	优势：约定优于配置、样板少；不足：迁移成本高，复杂自定义导航仍需手写

该技能的典型应用场景与实际体验情况

场景一：新项目从零搭导航骨架

角色：独立开发者或小团队前端。痛点是从零配置导航时容易漏装 react-native-screens、react-native-safe-area-context 导致启动即白屏，或者嵌套导航器层级搞错。使用方式是描述「底部三标签 + 首页内嵌堆栈」的需求，让技能一次性给出依赖、参数类型、导航器组合。实际体验：上手几乎无门槛，产出的结构层次清楚，照着落地基本不会卡在「为什么点了没反应」；注意落地前要确认原生依赖已完成安装与重新构建，否则问题依旧会出现在构建层。

场景二：给存量项目补类型安全

角色：接手他人项目的开发者。痛点是页面 props 大量写着 any，路由名拼错了运行时才发现。使用方式是让技能扫描导航相关文件，定义 RootStackParamList 并逐个页面替换为 NativeStackScreenProps。实际体验：这类改造收益立竿见影，编译期就能抓出拼写错误；注意改造面较大时要分批提交，避免一次性改动过多文件难以回归。

场景三：营销活动页的深度链接

角色：增长或客户端开发。痛点是 H5 活动页需要直接唤起 App 的某个详情页。使用方式是让技能补上 linking 配置与路径映射，并核对 prefixes 是否与原生工程里注册的 scheme 一致。实际体验：配置代码本身不复杂，难的是原生侧 scheme 与域名校验的配合，技能能给出前端侧的正确写法，原生配置仍需按项目实际情况核对。

场景四：登录态路由切换与返回键处理

角色：业务开发。痛点是登录后返回键还能退回登录页，或未登录用户通过深链直达受保护页面。使用方式是让技能实现「登录前后两套路由 + 守卫 replace 跳转 + Android BackHandler 拦截」。实际体验：这几处正是反模式高发区，技能会主动提示用 replace 而非 navigate；注意守卫逻辑要与你的鉴权状态管理保持单一数据源，避免状态不同步造成闪屏。

该技能能为用户带来的价值

效率层面：把「查文档、拼依赖、试错、补类型」的循环压缩成一次对话。一个包含底部标签、嵌套堆栈、参数传递、类型定义的导航骨架，手动从零写通常需要半天到一天（含踩依赖坑），有技能辅助后主要时间花在校对与联调上。深度链接、模态、守卫这类「低频但每次都要重新查」的配置，收益更明显。

质量层面：类型安全与反模式清单直接降低了运行时事故率。路由名拼写错误从「上线后用户反馈」提前到「编译报错」，navigate 与 replace 的误用从「返回键行为诡异」提前到「写代码时就被提醒」。

门槛层面：对刚接触 React Native 的开发者，导航是最容易劝退的一关——它同时牵扯原生依赖、TypeScript 泛型、组件层级三块知识。技能把这三块整合成一条清晰路径；对老手而言，它更像一份随叫随到的规范检查表，减少重复劳动。

长期价值：由于技能内置的是「最佳实践 + 反模式」而非零散技巧，长期使用会逐步把团队代码风格往统一、可维护的方向拉，新人接手成本随之下降。

常见问题 FAQ

Q1：这个技能怎么安装？收费吗？

A：在支持技能机制的平台技能库中，用英文名 react-native-navigation 或技能 ID 14187 检索并启用。是否需要付费、有无用量限制，取决于你所用平台的规则，以官方说明为准。

Q2：为什么我直接喊技能名字调用不了？

A：根据技能信息，该技能的「用户可调用」为否，属于在识别到 React Navigation 相关任务时自动启用的能力型技能。你正常描述需求（比如「帮我配底部标签导航」）即可，无需手动点名；若长时间未生效，请检查技能是否已在当前工作区启用。

Q3：它会不会擅自改我的项目文件？

A：该技能被允许使用读取、写入、编辑、Bash、Grep、Glob 工具，确实具备查看目录结构和修改文件的能力。建议在版本控制下使用，先让它「只出方案不改文件」，确认无误后再执行修改，改动后及时 review diff。

Q4：它和 Expo Router 这类文件路由方案怎么选？

A：如果你已经采用文件路由框架并满足其约定，迁移到 React Navigation 成本较高，不必为了用技能而改架构；如果你用的是 React Navigation（或需要在复杂自定义导航、深度链接、认证流程上做精细控制），这个技能更对口。两者也可以共存于不同项目。

Q5：适合谁用？需要什么前置知识？

A：适合正在用 React Native 开发 App 的移动端/前端工程师，以及需要维护 RN 项目的全栈开发者。前置知识建议至少了解 React 组件与 Hook 基础、TypeScript 泛型的基本读法；原生依赖安装（如 iOS 的 pod 安装、Android 的重新构建）仍需你按项目环境自行完成。