这个 Skill 能做什么，适合哪些场景？
该技能为 React Native 应用提供 JavaScript/React、原生 iOS/Android 和打包优化指南。它覆盖 FPS、重渲染、启动时间、包体积、内存泄漏、原生模块和动画卡顿。核心流程是“测量 → 优化 → 重新测量 → 验证”，并按影响优先级组织建议。内容基于 Callstack 的《The Ultimate Guide to React Native Optimization》。
指导助手先收集性能基线，再使用 agent-device React DevTools、React Native DevTools、Xcode Instruments、Android Studio CPU Profiler、react-native-performance、React Native bundle 和 source-map-explorer 等工具进行分析；随后根据证据提出列表虚拟化、状态拆分、React Compiler、Hermes、Turbo Module、R8 或代码分割等针对性修改，并要求重新测量结果。
- React Native 开发者在排查界面卡顿、动画掉帧或 FPS 不稳定时，需要基于实际交互进行 profiling。
- 团队发现组件重渲染过多时，需要定位慢组件、提交时间线或级联更新，再选择合适的优化方式。
- 应用冷启动缓慢时，需要测量 TTI 并检查原生导航、Hermes mmap 和启动阶段的昂贵屏幕。
- 移动应用包体积过大时，需要分析 JavaScript bundle、依赖、树摇和 Android 原生代码缩减。
- 开发 Turbo Module 或其他原生代码时，需要评估线程、同步调用、内存和跨平台性能。
如何安装这个 Skill？
- 执行 npx、Gradle、xcodebuild、bundle-phobia 或远程分块加载前，应确认版本、来源、网络和项目配置；不要把示例中的性能数字视为普遍保证。
- 远程 JavaScript 分块涉及高风险代码执行边界，必须验证签名清单、固定来源、版本绑定和失败关闭行为。
- 引用文件未在本次静态材料中全部展开，关键建议应结合目标项目的 React Native、Expo、Hermes 和 Re.Pack 版本复核。
- Shell / 命令行
- 本地文件系统
Node.jsReact Nativeagent-device
使用仓库 README 中的独立技能安装命令：$skill-installer install react-native-best-practices from callstackincubator/agent-skills。也可以克隆仓库后，将 skills/react-native-best-practices/ 放入项目的 .codex/skills/ 或用户级 ~/.codex/skills/ 目录。安装后重启 Codex。
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/callstackincubator/agent-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/react-native-best-practices" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
安装后，把下面任意一句发给 Agent 即可触发：
- 请先用 React DevTools profiling 分析这个 React Native 列表的掉帧问题，再根据测量结果优化并验证 FPS
在支持技能调用的客户端中提及 $react-native-best-practices，或输入类似“请先用 React DevTools profiling 分析这个 React Native 列表的掉帧问题，再根据测量结果优化并验证 FPS”的请求。若 agent-device 不可用，按技能说明改用 Metro 的 React Native DevTools 或 Dev Menu。
这个 Skill 有哪些优点和局限？
- 覆盖 JavaScript、原生性能和打包优化三个主要层面。
- 强调先测量再修改，包含具体 profiling、bundle 分析和验证命令。
- 提供按优先级和问题类型查找参考文档的路由。
- 包含 Hermes、FlashList、Turbo Modules、React Compiler、R8 和内存管理等实用主题。
- 它是指导性技能，不是自动执行性能修复的工具。
- 完整使用依赖 React Native 项目及相应命令行或原生 profiling 工具。
- 源材料没有提供测试套件或跨平台实测结果。
- 部分建议受 React Native、Expo、FlashList 等具体版本影响，需要先核对版本。
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| React Native 性能优化指南 本页 | 60 · 推荐 | ★ 1.7k | 18 天前 | MIT |
| React Native 性能与工程实践指南 | 51 · 谨慎使用 | ★ 1.7k | 18 天前 | MIT |
| Expo 原生 UI 构建助手 | 59 · 推荐 | ★ 2.9k | 21 天前 | MIT |
| Expo 棕地集成助手 | 58 · 推荐 | ★ 2.9k | 21 天前 | MIT |
| Expo 项目结构指南 | 57 · 谨慎使用 | ★ 2.9k | 21 天前 | MIT |
FollowSkills 如何评估这个 Skill？
内容明确要求先测量、审查依赖、避免远程脚本直执行，并对远程代码加载设置 HTTPS、签名清单、固定白名单和失败关闭等防护；未涉及凭证或敏感数据处理。但命令多数未锁定版本，回滚、用户确认和数据流边界未完整说明，因此扣7分。
主文件、POWER.md与引用索引大体一致，包含测量—优化—复测—验证流程、版本条件和手动回退；但未提供覆盖关键路径的测试或可执行失败诊断，部分工具和环境前置条件可能不可用。按静态评估上限取9分，扣除可复现性与异常反馈不足。
目标受众、触发场景、问题到引用文件的映射以及 Hermes、Expo、原生项目等适用条件较清楚；但非适用边界、输入输出契约、中文支持和中国大陆网络可达性未声明，部分工作流依赖本地设备及海外服务，因此扣4分。
结构清晰，按 JavaScript、Native、Bundling 分层，提供索引、命令、示例、常见陷阱、MIT 许可证和 Codex 元数据；但版本策略、变更日志、维护责任与更新路径主要依赖仓库外部信息，引用材料的版本适配仍不完整，因此扣5分。
覆盖 FPS、TTI、包体、内存、原生性能和动画，并提供问题路由和可直接使用的命令；但结果依赖项目配置、设备工具和人工分析，缺少已验证的代表性输出。静态上限为7分，扣除结果正确性和收益证据不足。
文件包含具体命令、测量指标、前后对比示例、引用文件和 Callstack 归因，具备一定审计性；但本次未执行，缺少提交的测试套件、CI 覆盖和多来源交叉验证。静态上限取5分，扣除独立复现证据不足。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →