# React Native Skills

> 在处理 React Native 与 Expo 应用任务时使用，涵盖性能优化、动画、UI 模式与平台特定最佳实践

- Skill: `kscz0000/react-native-skills` (Agent Skill, multi-file: 39 files)
- Install (CLI): `npx skillmds@latest add kscz0000/react-native-skills`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/react-native-skills/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/react-native-skills

---


# 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`

## 局限

- 仅当任务明确匹配上述范围时使用本技能。
- 不要把输出视为环境特定验证、测试或专家评审的替代品。
- 如果缺少必要输入、权限、安全边界或成功标准，请停下来并请求澄清。