floatboat
打开导航菜单

Vercel React Native Skills by Vercel Labs

使用 Vercel Labs 的 Vercel React Native Skills，辅助构建与审查 React Native 和 Expo 界面。围绕长列表、动画、导航、图片和原生依赖选择适用规则，结合具体页面与目标设备，检查影响移动端体验的实现。

从目标设备上的交互问题开始

将移动页面、目标设备和异常交互带入任务说明，区分列表渲染、手势和平台行为。请求应围绕同一路径提出修改及设备验证方法，而不是把整个页面交给 Agent 无范围重做。

说明 Expo 或 React Native、设备档次及出问题的手势或列表。

复制请求，在 Floatboat 新对话中粘贴，并提供所需资料。

下载 Floatboat

带入 Floatboat 的请求

请求可预览和复制，不会从此处自动发送。

参考来源: Vercel React Native Skills
https://github.com/vercel-labs/agent-skills/blob/main/skills/react-native-skills/SKILL.md

先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时，先提出方案。

我的任务:
检查这个 Expo 信息流页面。中端 Android 设备滚动卡顿，请定位列表和图片方面的可能瓶颈。

期望交付:
可能的瓶颈、涉及组件，以及在目标设备上的验证计划。

关于 Vercel React Native Skills

Vercel React Native Skills 是 Vercel Labs 面向 React Native 与 Expo 开发发布的 Agent Skill，整理了列表性能、动画、导航、界面模式、状态、渲染、Monorepo 和配置等移动端规则。对于滚动、手势、安全区域和媒体处理等依赖设备或原生平台的问题，它为 Agent 提供更贴近环境的参考。使用时可以从一个具体页面和可复现现象入手，选择相关规则并提出范围明确的实现建议。安装 Skill 添加的是指令，不会同时安装 Expo 包或原生依赖；最终代码仍需在应用支持的 iOS 与 Android 环境中验证。

Vercel React Native Skills的使用场景

滚动、手势和平台差异需要设备上的证据。了解 Vercel React Native Skills 如何检查渲染、动画与原生布局，避免直接套用网页假设。

滚动时掉帧

滚动掉帧需要结合目标设备上的记录和真实列表实现调查。重做整个页面前，先检查虚拟化、条目渲染、回调稳定性与图片设置。处理已定位的瓶颈后，在同一设备复现相同滚动交互，判断调整是否改善表现。

手势响应迟缓

手势反馈延迟时，沿实现方式和动画属性调查，检查手势基础能力是否合适、动画是否采用有利于合成的属性。修改后通过连续交互核对响应，而不是只看最终画面，因为单个静态状态无法说明动画是否跟得上用户动作。

同一页面在 iOS 与 Android 表现不同

同一界面在 iOS 与 Android 表现不同时，提供两端截图、设备尺寸和原生设置。分别检查安全区域、导航、图片、字体及平台 API，避免直接套用网页布局假设。找到平台特有原因后，在受影响的两端核对修改结果。

检查 Monorepo 中的原生依赖

Monorepo 中的 React Native 应用，可能受到工作区内不同依赖配置影响。对照该 Skill 的规则，检查原生依赖放置位置与包版本，先找出不一致再提出修改。限定修正范围，并在应用真实平台配置下验证，不假定共享 JavaScript 包就能保证原生依赖兼容。

如何审查 React Native 界面

移动端问题必须放回具体平台与设备检查。确定页面和交互后，按相关规则限定修改，再在代表设备复查原流程；iOS 与 Android 的差异不能靠网页经验直接推断。

  1. 复现页面表现

    明确出问题的页面、平台和交互。记录 React Native 或 Expo 版本，以及所用测试设备。

  2. 应用移动端规则

    让 Agent 检查对应的列表、动画、导航或媒体代码。围绕已复现的问题实施修改。

  3. 在目标设备验证

    在代表性 iOS 与 Android 设备上重复流程。比较响应表现，并确认手势、布局与内容仍然正确。

探索更多 Agent Skills

查看其他 Skill 指南，并在使用前核对原始来源。

Vercel React Native Skills 常见问题

这是给 React Native 还是网页 React 用的？
它面向 React Native 和 Expo；浏览器端渲染更适合使用单独的 Vercel React Best Practices Skill。
安装这个 Skill 会添加 Expo 依赖吗？
不会。安装的是 Agent 指令；修改代码或依赖需要另行执行明确的实现任务。
应该先检查哪类问题？
原文把列表性能列为最高优先级；滚动卡顿时可先从这里查，但仍以页面和设备证据为准。
它能代替真机测试吗？
不能。规则帮助选择改动；真实 iOS、Android 测试才能判断体验是否改善。
代码审查后列表为什么仍然卡顿？
滚动还受列表项复杂度、图片处理和实际设备影响。应在目标设备上测试有代表性的长列表，不能仅凭源码审查通过就认为交互流畅。
Android 与 iOS 的界面决定必须完全相同吗？
可以复用任务逻辑和组件结构，但手势、安全区域、键盘和图片表现都要在两端验证。必要时应保留符合平台行为的独立处理。
哪些项目信息有助于选择移动端规则？
提供 React Native 与 Expo 版本、受影响页面、目标平台和复现步骤。涉及滚动或动画时，也应说明相关库及设备上的测量结果。