React Native 实践技巧

适用场景

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

按优先级划分的规则类别

list-performance-

animation-

navigation-

ui-

react-state-

rendering-

monorepo-

fonts-

imports-

快速参考

1. 列表性能（关键）

• list-performance-virtualize

  - 对大型列表使用FlashList

• list-performance-item-memo

  - 对列表项组件进行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

  - 仅对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

  - 在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 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