Skill 广场
React Native跨端性能优化规范 Skill

React Native跨端性能优化规范.Skill

@vercel-labs/vercel-react-native-skills

4.8优秀AI 评分基础检查通过源自 GitHub

输入React Native组件或配置代码,根据跨端最佳实践审查性能隐患,输出列表渲染、动画与状态优化的重构方案。

编程React Native 移动端开发工程师Expo 跨端应用全栈开发者移动前端架构师2026-09-29 更新main

React Native跨端性能优化规范

专为 React Native 与 Expo 移动端开发者设计的最佳实践参考指南。用户提交存在掉帧、卡顿或规范问题的移动端组件与配置代码后,指南会依据长列表虚拟化、GPU 加速动画、原生导航以及状态精简等工程标准,指出代码隐患并提供正反对比示例与重构建议。适用于排查列表卡顿、优化手势交互及规范单体仓库依赖。用户需具备基础的移动端与 React 开发经验。

常见场景

它能帮你做什么?

01

长列表滑动卡顿优化:分析长列表实现,指出内联对象与冗余渲染,提供基于 FlashList 的轻量项重构方案。

02

Reanimated 手势动画改造:检查动画驱动属性,将引发重排的样式改为 GPU 加速的 transform 与透明度属性。

03

跨平台导航与安全区适配:规范原生堆栈导航选型与滚动视图安全区配置,消除界面遮挡与转场卡顿。

三步完成

怎么使用

1安装 Skill

把右侧安装请求发给你的 AI。

2说清楚目标

告诉 AI 你想完成什么,或直接贴入内容。

3检查结果

按需要继续调整语气、范围或格式。

复制就能用

你可以直接这样说

“如何用 FlashList 重构当前包含复杂图文的 FlatList 以解决下拉卡顿?”

“检查这段 Reanimated 手势缩放代码,改写为仅消耗 GPU 性能的高效写法。”

“在 Expo Monorepo 项目中,原生依赖包应该如何放置以避免多版本冲突?”

适用人群

适合谁?

React Native 移动端开发工程师Expo 跨端应用全栈开发者移动前端架构师

上手门槛

使用难度

进阶

需要了解任务流程,页面已整理好使用步骤。

兼容范围

支持哪些 AI?

Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes Agent可直接使用
国内 Agent可直接使用

中文用户增强

Skill Px 做了什么?

中文说明简化使用方式补充中文案例整理安装流程降低理解难度