Skip to main content

Vercel React Native 最佳实践

由 Vercel 维护的 React Native 和 Expo 应用最佳实践综合指南，涵盖列表渲染、动画、导航和原生模块，旨在指导高性能移动应用的开发与代码审查。

安装​

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills

概述​

React Native 和 Expo 的性能与架构指南，按影响程度划分为八个规则类别。

  • 列表性能（FlashList、记忆化、回调稳定性）、动画（GPU 属性、派生值）、导航、UI 模式、状态管理、渲染、单体仓库结构和配置。
  • 列表性能规则解决虚拟化大型列表、优化图片、避免不必要的重新渲染等问题。
  • 动画指导侧重 GPU 加速属性（transform、opacity）与 Reanimated 模式；导航建议使用原生堆栈和标签导航器，而非纯 JS 方案。
  • UI 模式规则包括：所有图片使用 expo-image、优先 Pressable 而非 TouchableOpacity、原生模态框，以及 ScrollView 中的安全区域处理。
  • 每条规则都有前缀代码（例如 list-performance-virtualize、animation-gpu-properties），便于在自动化工具和文档中引用。

何时申请​

在以下情况下请参考这些准则：

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

按优先级划分的规则类别​

优先级类别影响前缀
1列表性能关键list-performance-
2动画高animation-
3导航高navigation-
4UI 模式高ui-
5状态管理中等react-state-
6渲染中等rendering-
7单体仓库中等monorepo-
8配置低fonts-、imports-

快速参考​

1. 列表性能（至关重要）​

规则 ID说明
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 types

2. 动画（高）​

规则 ID说明
animation-gpu-properties仅对 transform 和 opacity 做动画
animation-derived-value计算动画使用 useDerivedValue
animation-gesture-detector-press按压交互使用 Gesture Detector

3. 导航（高）​

规则 ID说明
navigation-native-navigators使用原生 Stack 和原生 Tab，而非 JS 导航器

4. UI 模式（高）​

规则 ID说明
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. 状态管理（中等）​

规则 ID说明
react-state-minimize尽量减少状态订阅
react-state-dispatcher回调使用 dispatcher 模式
react-state-fallback首次渲染显示 fallback
react-compiler-destructure-functionsReact Compiler 解构函数
react-compiler-reanimated-shared-values编译器处理共享值

6. 渲染（中等）​

规则 ID说明
rendering-text-in-text-component文本包裹在 Text 组件内
rendering-no-falsy-and条件渲染避免 && 与假值

7. 单体仓库（中等）​

规则 ID说明
monorepo-native-deps-in-app原生依赖保留在 app 包内
monorepo-single-dependency-versions各包使用统一依赖版本

8. 配置（低）​

规则 ID说明
fonts-config-plugin自定义字体使用 config plugin
imports-design-system-folder整理设计系统导入
js-hoist-intl提升 Intl 对象创建

如何使用​

请阅读各个规则文件以获取详细说明和代码示例：

  • rules/list-performance-virtualize.md
  • rules/animation-gpu-properties.md

每个规则文件包含：

  • 简要解释其重要性
  • 错误代码示例及解释
  • 正确的代码示例及解释
  • 更多背景信息和参考资料

完整汇编文件​

完整规则详解请见：AGENTS.md