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 - 对回调使用分发器模式
• 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-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