🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills

💡 提示：需要 Node.js 和 NPM

React Native 技能

适用于 React Native 和 Expo 应用程序的全面最佳实践。包含多个类别的规则，涵盖性能、动画、UI 模式以及特定平台的优化。

何时应用

在以下情况参考这些指南：

  • 构建 React Native 或 Expo 应用时
  • 优化列表和滚动性能时
  • 使用 Reanimated 实现动画时
  • 处理图片和媒体时
  • 配置原生模块或字体时
  • 构建包含原生依赖的 Monorepo 项目时

按优先级分类的规则类别

优先级 类别 影响 前缀
1 列表性能 关键 list-performance-
2 动画 高 animation-
3 导航 高 navigation-
4 UI 模式 高 ui-
5 状态管理 中 react-state-
6 渲染 中 rendering-
7 Monorepo 中 monorepo-
8 配置 低 fonts-, imports-

快速参考

1. 列表性能 (关键)

  • list-performance-virtualize – 对大型列表使用 FlashList
  • list-performance-item-memo – 记忆化列表项组件
  • list-performance-callbacks – 稳定化回调引用
  • list-performance-inline-objects – 避免内联样式对象
  • list-performance-function-references – 将函数提取到渲染外部
  • list-performance-images – 优化列表中的图片
  • list-performance-item-expensive – 将昂贵操作移出列表项
  • list-performance-item-types – 对异构列表使用项目类型

2. 动画 (高)

  • animation-gpu-properties – 仅对 transform 和 opacity 进行动画
  • animation-derived-value – 使用 useDerivedValue 进行计算的动画
  • animation-gesture-detector-press – 使用 Gesture.Tap 替代 Pressable

3. 导航 (高)

  • navigation-native-navigators – 优先使用原生堆栈和原生标签页，而不是 JS 导航器

4. UI 模式 (高)

  • ui-expo-image – 对所有图片使用 expo-image
  • ui-image-gallery – 对图片灯箱使用 Galeria
  • ui-pressable – 使用 Pressable 替代 TouchableOpacity
  • ui-safe-area-scroll – 在 ScrollView 中处理安全区域
  • ui-scrollview-content-inset – 使用 contentInset 处理头部
  • ui-menus – 使用原生上下文菜单
  • ui-native-modals – 尽可能使用原生模态框
  • ui-measure-views – 使用 onLayout，而不是 measure()
  • ui-styling – 使用 StyleSheet.create 或 Nativewind

5. 状态管理 (中)

  • react-state-minimize – 最小化状态订阅
  • react-state-dispatcher – 对回调使用调度器模式
  • react-state-fallback – 首次渲染时显示备用 UI
  • react-compiler-destructure-functions – 为 React 编译器进行解构
  • react-compiler-reanimated-shared-values – 处理编译器中的共享值

6. 渲染 (中)

  • rendering-text-in-text-component – 将文本包裹在 Text 组件中
  • rendering-no-falsy-and – 避免使用 falsy && 进行条件渲染

7. Monorepo (中)

  • monorepo-native-deps-in-app – 将原生依赖保留在应用包中
  • monorepo-single-dependency-versions – 在所有包中使用单一版本

8. 配置 (低)

  • fonts-config-plugin – 对自定义字体使用配置插件
  • imports-design-system-folder – 组织设计系统的导入
  • js-hoist-intl – 提升 Intl 对象的创建

如何使用

阅读各个规则文件以获取详细解释和代码示例：

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

每个规则文件包含：

  • 为何重要的简要说明
  • 带有解释的错误代码示例
  • 带有解释的正确代码示例
  • 额外的上下文和参考

完整汇编文档

包含所有展开规则的完整指南：AGENTS.md

📄 原始文档

完整文档（英文）：

https://skills.sh/vercel-labs/agent-skills/vercel-react-native-skills

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。