关于 vercel-react-native-skills
React Native Skills 是一组面向 React Native 与 Expo 应用的最佳实践规则，按优先级覆盖列表性能、动画、导航、UI 模式、状态管理、渲染、Monorepo 与配置等类别。适合构建或优化移动应用的开发者与编码 Agent 参考使用。
主要功能
- 01按优先级分类的规则集合
- 02列表性能与虚拟化优化规则
- 03Reanimated 动画实现规则
- 04图片与媒体处理规则
- 05原生模块与字体配置规则
- 06Monorepo 原生依赖管理规则
适用场景
- 01优化长列表与滚动性能
- 02使用 Reanimated 实现动画
- 03规范 Expo 应用的图片与字体配置
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vercel-react-native-skills确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
AGENTS.mdmetadata.jsonREADME.mdrules/_sections.md_template.mdanimation-derived-value.mdanimation-gesture-detector-press.mdanimation-gpu-properties.mddesign-system-compound-components.mdfonts-config-plugin.mdimports-design-system-folder.mdjs-hoist-intl.mdlist-performance-callbacks.mdlist-performance-function-references.mdlist-performance-images.mdlist-performance-inline-objects.mdlist-performance-item-expensive.mdlist-performance-item-memo.mdlist-performance-item-types.mdlist-performance-virtualize.mdmonorepo-native-deps-in-app.mdmonorepo-single-dependency-versions.mdnavigation-native-navigators.mdreact-compiler-destructure-functions.mdreact-compiler-reanimated-shared-values.mdreact-state-dispatcher.mdreact-state-fallback.mdreact-state-minimize.mdrendering-no-falsy-and.mdrendering-text-in-text-component.md详细介绍
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- 大型列表使用 FlashListlist-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- 对计算出的动画使用 useDerivedValueanimation-gesture-detector-press- 使用 Gesture.Tap 替代 Pressable
3. 导航（高）
navigation-native-navigators- 使用原生堆栈和原生标签页，替代 JS 导航器
4. UI 模式（高）
ui-expo-image- 所有图像都使用 expo-imageui-image-gallery- 使用 Galeria 实现图像灯箱ui-pressable- 使用 Pressable 替代 TouchableOpacityui-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- 首次渲染时显示后备内容react-compiler-destructure-functions- 解构以配合 React Compilerreact-compiler-reanimated-shared-values- 使用编译器时处理共享值
6. 渲染（中）
rendering-text-in-text-component- 将文本包装在 Text 组件中rendering-no-falsy-and- 避免使用假值 && 进行条件渲染
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
评论
支持 Markdown