名称: vercel-react-native-skills 描述: 用于构建高性能移动应用的React Native和Expo最佳实践。在构建React Native组件、优化列表性能、实现动画或处理原生模块时使用。触发于涉及React Native、Expo、移动性能或原生平台API的任务。 许可证: MIT 元数据: 作者: vercel 版本: ‘1.0.0’ 已验证: false 最后验证时间: 2026-02-19T05:29:09.098Z
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- 仅动画化变换和不透明度animation-derived-value- 使用useDerivedValue进行计算的动画animation-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- 在ScrollViews中处理安全区域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编译器解构函数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