列表
滚动时掉帧
先检查虚拟列表、条目渲染、回调稳定性与图片，不急着重写整个页面。
01 / Skill 档案 · React Native · 移动端性能
React Native Skills：检查真正影响移动端体验的瓶颈
面向 React Native 与 Expo 的指导型 Skill，优先关注大列表、动画、导航、媒体和平台差异。
发布方、原始来源与安装方式
原发布方 Vercel Labs · 类型: 移动端实现与审查 Skill
本页为独立介绍；Vercel Labs 未对 Floatboat 作出背书。
上游安装方式
npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills通过上游 Skills CLI 安装指令；本页不会安装移动端运行环境。
一个具体请求
原始文件按优先级整理移动端规则。面对列表虚拟化、手势性能、安全区域或图片处理时，普通 Web React 建议往往不够，这个 Skill 更对题。
向 Agent 提问
“检查这个 Expo 信息流页面。中端 Android 设备滚动卡顿，请定位列表和图片方面的可能瓶颈。”
应该得到什么
合格回答应指出条目渲染与图片路径，提出有边界的改动，并在声称修复前要求设备测量。
React Native Skill 适用场景
当界面表现依赖设备渲染或原生 API 时，应使用移动端专属规则。
动效
手势响应迟缓
核对动画是否使用适合 GPU 的属性，以及手势是否采用合适的原语。
平台
同一页面在 iOS 与 Android 表现不同
检查安全区域、原生导航、图片、字体和平台 API，不把网页布局经验直接套过去。
它不能替代什么
- 纯浏览器 React 应用；应优先使用 Web React 指南。
- 证明页面在所有设备上都流畅；仍需要设备测试。
如何调查移动端界面
从设备上复现的症状出发，选择相关规则并做有限修改。
- 01
在目标设备复现
记录出问题的页面、平台与具体手势。
- 02
查找对应的移动端规则
如果症状是掉帧，先看列表与动画类规则。
- 03
重新测试两个平台
在目标 iOS、Android 设备范围内复核行为和性能。
02 / 使用指南
按移动端瓶颈选择规则
原文把列表性能放在细节美化之前。先明确设备与交互，再选择合适模式。
它和 React Best Practices 有什么不同？
这个 Skill 处理原生与 Expo 特有问题：虚拟列表、手势、安全区域、原生导航、图片和原生模块结构。Web 版 React Skill 则更关注请求瀑布与浏览器包体积。
是否包含 Expo 的具体建议？
包含。原文除了 React Native 通用模式，也涉及 Expo 图片处理与移动端配置。采用建议前需要核对依赖包和 SDK 版本。
你能拿到什么
- 移动端瓶颈短名单
- 限定范围的组件或配置改动
- 设备验证清单
使用前先核对
- 确认 Expo 与依赖版本。
- 测试目标设备档位，不只看模拟器。
- 检查无障碍与减少动态效果设置。
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
常见问题
这是给 React Native 还是网页 React 用的？
它面向 React Native 和 Expo；浏览器端渲染更适合使用单独的 Vercel React Best Practices Skill。
安装这个 Skill 会添加 Expo 依赖吗？
不会。安装的是 Agent 指令；修改代码或依赖需要另行执行明确的实现任务。
应该先检查哪类问题？
原文把列表性能列为最高优先级；滚动卡顿时可先从这里查，但仍以页面和设备证据为准。
它能代替真机测试吗？
不能。规则帮助选择改动；真实 iOS、Android 测试才能判断体验是否改善。