react-native

react-native 技能概览

这个 react-native 技能能做什么

react-native 技能是一个面向 React Native 应用代码的实用指南，尤其适合你需要保持组件模式一致、兼顾平台差异行为，以及更清晰地区分 UI 和逻辑的时候。它最适合用于 Frontend Development 任务，而且产出必须贴合移动端代码库，而不是泛泛的 React 提示词。

适合谁使用

如果你正在编辑 .tsx 或 .jsx 页面、搭建可复用的移动端组件，或者需要处理 ios/ 和 android/ 相关的应用行为，就很适合使用这个 react-native 技能。它尤其适合你想要一种可通过提示词驱动的应用结构工作流，而不只是一次性的代码生成。

安装前最重要的事

这个技能轻量而聚焦：它偏向函数组件、用 hooks 处理页面逻辑，以及清晰的项目结构。它看起来并不像带有脚本或辅助资源的完整框架，所以你得到的更偏向指导层面的价值，而不是自动化工具本身。如果你想在现有应用里写出更易维护的 React Native 代码，react-native 技能是很合适的选择。

如何使用 react-native 技能

在正确的上下文里安装

如果要安装这个技能，请把工作区指向包含 skills/react-native 的仓库路径，然后使用平台提供的技能安装流程。如果你的系统支持源码里展示的 repo 风格命令，模式如下：
npx skills add alinaqi/claude-bootstrap --skill react-native

提供合适的输入

这个技能在你的请求里包含以下信息时效果最好：目标页面或组件、平台相关约束，以及代码边界。比如，不要只说“做一个设置页”，而应该要求“一个使用函数组件、抽离 hooks、并分别处理 iOS/Android 安全区间距的 React Native 设置页”。

先看这些文件

先从 SKILL.md 入手，理解它的模式；如果你的项目里有 CLAUDE.md，再继续查看。然后扫描你应用里的 src/components/、src/screens/、navigation/ 和 store/ 结构，这样输出才会贴合你现有的 React Native 约定。尤其当仓库已经使用 TypeScript、barrel exports 或基于 hooks 的页面逻辑时，这个技能会更有帮助。

用能减少返工的工作流

更好的 react-native 使用方式是：先描述 UI 目标，再说明平台差异，接着指定状态和数据来源，最后要求拆分 component 和 hook。相比直接要求“best practices”，这种方式更有效，因为这个技能本来就是为了把粗略的移动端需求转成适配真实 React Native 应用的代码。

react-native 技能常见问题

这个 react-native 技能只适用于 React Native 应用吗？

是的。react-native 技能面向的是 React Native 移动端应用代码，不是只做网页的 React 组件。如果你的任务主要是浏览器端 UI，通常换一个技能，或者直接用普通 React 提示词，会更合适。

它和通用提示词有什么不同？

通用提示词也许能生成可运行的代码，但这个技能会把输出往更偏移动端的结构上引导：函数组件、可复用 UI 片段、抽离 hooks，以及明确考虑 ios/ 和 android/ 代码路径。这样一来，当一致性和可维护性很重要时，它会更有用。

适合新手吗？

大体上是适合的，只要你能清楚描述想要的页面或功能就行。使用 react-native 技能不需要很深的仓库知识，但你必须把功能边界说清楚，否则输出可能会过于宽泛。

什么情况下不该用它？

纯后端工作、只做网页 UI 的任务，或者已经被一个很小的单文件修改完全约束住的任务，都不适合依赖它。它最有价值的场景，是任务同时涉及组件结构、hooks 和移动端应用规范的时候。

如何改进 react-native 技能

把功能边界说得更清楚

效果最好的输入，会明确页面、用户动作和平台约束。比如，“创建一个个人资料编辑表单”不如“创建一个 React Native 个人资料编辑页，包含文本输入框、头像上传占位、在自定义 hook 中做校验，并分别处理 Android 键盘行为”来得有用。

把你想要的代码形态说出来

如果你在意可维护性，就直接说明：只要函数组件、逻辑放在 hooks 里、使用可复用子组件，或者不要 class components。react-native 技能本来就是围绕这些模式设计的，提前说清楚能减少后续清理成本。

说明你想保留的仓库模式

如果你的应用已经在用 barrel exports、screens/ 分层，或者用 core/ 目录放非 UI 逻辑，请把这些也写进提示词。这样能帮助技能输出贴合你现有的 React Native 规范，避免代码看起来没问题，却落在错误的目录里。

在第一版基础上继续迭代

如果第一次结果太泛泛，不妨下一轮只盯住一个失败点：平台细节缺失、组件里塞了太多 UI 逻辑，或者文件夹放置不合理。这样的反馈比一句“帮我改好一点”更有效，通常也能更快改善下一版 react-native 输出。