关于 migrate-to-static-config
面向 React Navigation 开发者的迁移技能,用于将基于 JSX 的动态导航器配置转换为 Static API。重点是保留行为、类型和深层链接,并提供版本对应的参考与验证步骤。
主要功能
- 01动态导航器转静态配置
- 02保留行为与深层链接
- 03按版本提供 React Navigation 参考
- 04包装器和屏幕数据迁移指南
- 05编辑后的验证清单
适用场景
- 01将 JSX 导航器转换为静态配置
- 02迁移 React Navigation 7.x 项目
- 03迁移 React Navigation 8.x 项目
- 04迁移后检查行为与链接
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ react-navigation/ skills --skill migrate-to-static-config安装后在 Claude Code 中输入/migrate-to-static-config确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlreferences/react-navigation-7-custom-navigators.mdreact-navigation-7-get-component.mdreact-navigation-7-mixing-apis.mdreact-navigation-7-render-callbacks.mdreact-navigation-7.mdreact-navigation-8-custom-navigators.mdreact-navigation-8-get-component.mdreact-navigation-8-mixing-apis.mdreact-navigation-8-render-callbacks.mdreact-navigation-8.md详细介绍
迁移到静态配置
目标
将 React Navigation 导航器从基于 JSX 的动态设置转换为静态配置,同时保留行为、类型和深链接。
何时使用
你正在 React Navigation 中将屏幕从动态 API 迁移到静态 API。
适配策略
将此技能中的模式视为规范性的起点,而非详尽无遗的列表。缺少完全匹配的示例并不构成阻碍。
- 将本地代码映射到此处最接近的模式并进行适配;当结构不同时,推断出等效方案。
- 优先选择保留行为的最简单迁移。
- 保持更改最小且局部,符合现有代码风格和 React Navigation 预期的静态 API。
- 避免定制抽象,除非更简单的模式明显无法保留行为。
决策规则
按以下优先顺序使用:
- 直接静态配置转换。
- 静态配置加
.with(),用于导航器级别的包装器或动态导航器属性。 - 静态配置加 context,用于之前通过渲染回调传递的额外屏幕数据。
- 仅当静态配置无法在不实质性改变行为的情况下表达屏幕结构时,才保持导航器为动态。
何时请求澄清
先检查本地代码。
如果在阅读相关导航器及其直接调用方后,你无法高置信度地解释最终屏幕结构、链接行为及保留的行为如何映射到静态 API,请暂停并在编辑代码前询问用户。
在以下情况请求澄清:
- 部分行为隐藏在本地抽象之后。
- 迁移需要假设哪些行为是有意为之。
- 不清楚相关辅助函数是否应作为同一更改的一部分进行更新。
参考
首先检查 package.json 中的 @react-navigation/native。
- 如果是
7.x,请阅读references/react-navigation-7.md - 如果是
8.x,请阅读references/react-navigation-8.md
7.x 之前的版本不支持静态配置。
加载与版本匹配的主参考文件。主参考文件会指向配套文件(自定义导航器、渲染回调、getComponent、混合 API)——仅当被迁移的代码库中存在匹配模式时才加载每个文件。
验证
编辑代码后:
- 从
package.json或锁文件中确定包管理器。 - 当脚本可用时,运行现有的类型检查器、linter 和相关测试。
- 如果某个验证步骤无法运行,请报告原因,并对照已加载参考中的检查清单进行手动审查。
评论
支持 Markdown