⚡

ReactNative高效开发技能 react-native-skills

此技能提供React Native和Expo移动应用开发的最佳实践指南，涵盖列表性能优化、动画实现、UI模式、状态管理等关键领域，帮助开发者提升应用性能和用户体验。关键词：React Native, Expo, 移动开发, 性能优化, 动画, UI设计, 状态管理。

移动开发 0 次安装 0 次浏览 更新于 3/7/2026

name: 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-
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-image
  • ui-image-gallery - 使用 Galeria 进行图像灯箱
  • ui-pressable - 使用 Pressable 替代 TouchableOpacity
  • ui-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