name: vercel-react-native-skills
description: React Native 和 Expo 构建高性能移动应用的最佳实践。适用于构建 React Native 组件时、优化列表性能时、实现动画时或使用原生模块时。触发场景包括涉及 React Native、Expo、移动性能或原生平台 API 的任务。
license: MIT
metadata:
    author: vercel
    version: '1.0.0'

React Native 技能

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

适用时机

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

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

规则类别（按优先级排序）

快速参考

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 - 对异构列表使用 item 类型

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 - 对回调使用 dispatcher 模式
• react-state-fallback - 首次渲染时显示回退内容
• react-compiler-destructure-functions - 为 React Compiler 解构函数
• 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