名称: react-native-skills 描述: React Native和Expo构建高性能移动应用的最佳实践。当构建React Native组件、优化列表性能、实现动画或使用原生模块时使用。在涉及React Native、Expo、移动性能或原生平台API的任务时触发。 许可证: MIT 元数据: 作者: vercel 版本: ‘1.0.0’
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- 仅动画变换和不透明度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