kscz0000 React Native 技能
面向 React Native 与 Expo 应用的综合最佳实践。涵盖多个类别下的规则，包括性能、动画、UI 模式以及平台特定优化。
何时使用
在以下场景参考这些指南：
- 构建 React Native 或 Expo 应用
- 优化列表与滚动性能
- 使用 Reanimated 实现动画
- 处理图像与媒体
- 配置原生模块或字体
- 在 monorepo 项目中组织含原生依赖的结构
规则分类（按优先级）
| 优先级 | 类别 | 影响力 | 前缀 |
|---|---|---|---|
| 1 | 列表性能 | 关键 | 列表性能类 |
| 2 | 动画 | 高 | 动画类 |
| 3 | 导航 | 高 | 导航类 |
| 4 | UI 模式 | 高 | UI 类 |
| 5 | 状态管理 | 中 | React 状态类 |
| 6 | 渲染 | 中 | 渲染类 |
| 7 | Monorepo | 中 | Monorepo 类 |
| 8 | 配置 | 低 | 字体类、导入类 |
快速参考
1. 列表性能（关键）
针对大列表与高密度滚动场景的核心规则：
- 列表虚拟化：对大列表使用 FlashList 提升性能
- 列表项缓存：缓存列表项组件避免重复渲染
- 回调稳定：稳定回调引用防止子项重渲染
- 内联对象：避免内联样式对象触发整体重建
- 函数引用：把函数提取到渲染外部保持引用稳定
- 列表图像：在长列表中优化图像加载与缓存
- 昂贵操作：把昂贵计算移出列表项组件
- 列表项类型：为异构列表指定 item types
2. 动画（高）
针对 Reanimated 与手势系统的关键规则：
- GPU 属性：仅对 transform 与 opacity 做动画以走 GPU
- 派生值：使用 useDerivedValue 处理计算型动画值
- 手势点击：使用 Gesture.Tap 替代 Pressable 提升响应
3. 导航（高）
- 原生导航器：优先使用原生栈与原生标签，胜过 JS 导航器
4. UI 模式（高）
针对常见 UI 场景的推荐做法：
- 图像组件：所有图像统一使用 expo-image
- 图片灯箱：使用 Galeria 处理图片灯箱与浏览
- 按压组件：优先使用 Pressable 而非 TouchableOpacity
- 安全区滚动：在 ScrollView 中处理安全区域留白
- 滚动内边距：使用 contentInset 适配头部偏移
- 上下文菜单：使用原生上下文菜单提升体验
- 原生模态：尽可能使用原生模态框
- 视图测量：使用 onLayout 而非 measure()
- 样式方案：使用 StyleSheet.create 或 Nativewind
5. 状态管理（中）
- 最小订阅：最小化 state 订阅范围
- 分发器模式：为回调使用 dispatcher 模式
- 首次渲染占位：在首次渲染时显示占位避免闪烁
- 编译器解构：为 React Compiler 进行函数解构
- 共享值处理：与编译器协作处理 Reanimated 共享值
6. 渲染（中）
- 文本组件：将文本包裹在 Text 组件中以保留样式
- 条件渲染：避免用 falsy 与运算做条件渲染
7. Monorepo（中）
- 原生依赖位置：将原生依赖保留在 app 包内
- 依赖版本统一：在所有包内使用统一依赖版本
8. 配置（低）
- 字体插件：使用 config plugin 接入自定义字体
- 设计系统目录：组织设计系统导入目录结构
- 国际化提升：提升 Intl 对象创建避免重复实例化
如何使用
阅读单个规则文件获取详细说明与代码示例：
rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
每条规则文件包含：
- 简要说明为何重要
- 错误代码示例及解释
- 正确代码示例及解释
- 额外上下文与参考资料
完整编译文档
如需展开全部规则的完整指南：AGENTS.md
局限
- 仅当任务明确匹配上述范围时使用本技能。
- 不要把输出视为环境特定验证、测试或专家评审的替代品。
- 如果缺少必要输入、权限、安全边界或成功标准，请停下来并请求澄清。