mcpField
R
react-native

react-native

github.com/gigs-slc开发380 次安装40 周前更新
代码仓库

关于 react-native

React Native 性能指南技能，汇集 Callstack 的性能测量与原生优化资料，以及 Vercel 的代码模式和实践规则。适用于排查卡顿、内存、启动和体积问题的 React Native 开发者。

主要功能

  1. 01渲染与列表性能建议
  2. 02FPS 与重渲染分析
  3. 03动画和导航模式
  4. 04启动时间与包体优化
  5. 05内存及原生性能排查
  6. 06单体仓库与状态管理指南

适用场景

  1. 01排查界面卡顿与动画掉帧
  2. 02分析列表滚动及重复渲染
  3. 03测量启动时间并缩减包体
  4. 04查找 JavaScript 或原生内存泄漏

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/gigs-slc/react-native-skills --skill react-native

安装后在 Claude Code 中输入/react-native确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
references/
bundle-analyze-app.md
bundle-analyze-js.md
bundle-barrel-exports.md
bundle-code-splitting.md
bundle-hermes-mmap.md
bundle-library-size.md
bundle-native-assets.md
bundle-r8-android.md
bundle-tree-shaking.md
js-animations-reanimated.md
js-atomic-state.md
js-concurrent-react.md
js-lists-flatlist-flashlist.md
js-measure-fps.md
js-memory-leaks.md
js-profile-react.md
js-react-compiler.md
js-uncontrolled-components.md
native-measure-tti.md
native-memory-leaks.md
native-memory-patterns.md
native-platform-setup.md
native-profiling.md
native-sdks-over-polyfills.md
native-threading-model.md
native-turbo-modules.md
native-view-flattening.md
rules/
_sections.md
_template.md

详细介绍

React Native 完整指南

终极 React Native 优化指南，整合了：

  • Callstack - 性能分析、测量和原生优化（27 条参考）
  • Vercel - 代码模式、UI 和最佳实践（36 条规则）

适用场景

在以下情况下参考这些指南：

  • 调试缓慢或卡顿的 UI 或动画
  • 优化列表和滚动性能
  • 排查内存泄漏（JS 或原生）
  • 优化应用启动时间（TTI）
  • 缩减包或应用体积
  • 使用 Reanimated 实现动画
  • 使用原生组件构建 UI
  • 使用 React Compiler
  • 规划单体仓库项目结构

按优先级排列的指南

优先级类别影响来源
1核心渲染严重Vercel
2列表性能严重两者
3FPS 和重复渲染严重Callstack
4包体积严重Callstack
5动画高两者
6导航高Vercel
7TTI 优化高Callstack
8UI 模式高Vercel
9原生性能高Callstack
10状态管理中Vercel
11React Compiler中两者
12内存管理中Callstack
13单体仓库中Vercel

快速参考：代码模式（Vercel）

核心渲染（严重）
  • rendering-no-falsy-and - 切勿将 && 与假值搭配使用（会导致应用崩溃）
  • rendering-text-in-text-component - 将字符串包裹在 Text 组件中
列表性能（严重）
  • list-performance-virtualize - 所有列表都使用 FlashList/LegendList
  • list-performance-item-memo - 对列表项组件进行记忆化
  • list-performance-callbacks - 稳定回调引用
  • list-performance-inline-objects - 避免内联样式对象
  • list-performance-function-references - 将函数移出渲染函数
  • list-performance-images - 使用经过压缩且尺寸合适的图片
  • list-performance-item-expensive - 将耗时操作移到列表项之外
  • list-performance-item-types - 对异构列表使用项类型
动画（高）
  • animation-gpu-properties - 仅对 transform 和 opacity 添加动画
  • animation-derived-value - 对计算所得的动画使用 useDerivedValue
  • animation-gesture-detector-press - 使用 Gesture.Tap 实现按压动画
导航（高）
  • navigation-native-navigators - 优先使用原生堆栈/标签导航器，而非 JS 导航器
UI 模式（高）
  • ui-expo-image - 所有图片都使用 expo-image
  • ui-image-gallery - 使用 Galeria 实现灯箱效果
  • ui-pressable - 优先使用 Pressable，而非 TouchableOpacity
  • ui-safe-area-scroll - 使用 contentInsetAdjustmentBehavior
  • ui-scrollview-content-inset - 使用 contentInset 实现动态间距
  • ui-menus - 使用原生上下文菜单（zeego）
  • ui-native-modals - 优先使用原生模态框，而非 JS 底部弹层
  • ui-measure-views - 使用 onLayout，而非 measure()
  • ui-styling - 使用 StyleSheet.create、gap、borderCurve
状态管理（中）
  • react-state-minimize - 派生值，尽量减少状态
  • react-state-dispatcher - 使用 dispatch 更新函数
  • react-state-fallback - 对响应式默认值使用回退模式
  • state-ground-truth - 状态代表真实数据，视觉效果应由此派生
React Compiler（中）
  • react-compiler-destructure-functions - 尽早解构函数
  • react-compiler-reanimated-shared-values - 使用 .get()/.set()，而非 .value
单体仓库（中）
  • monorepo-native-deps-in-app - 在应用包中安装原生依赖
  • monorepo-single-dependency-versions - 在所有包中统一依赖版本
配置（低）
  • fonts-config-plugin - 在构建时加载字体
  • imports-design-system-folder - 从设计系统重新导出
  • js-hoist-intl - 提升 Intl 格式化器的创建位置

快速参考：性能分析与测量（Callstack）

FPS 与重新渲染（CRITICAL）
# Open React Native DevTools
# Press 'j' in Metro, or shake device → "Open DevTools"
  • js-profile-react.md - React DevTools 性能分析
  • js-measure-fps.md - FPS 监控
  • js-react-compiler.md - 自动记忆化
  • js-atomic-state.md - Jotai/Zustand 模式
  • js-concurrent-react.md - useDeferredValue、useTransition
包体积（CRITICAL）
npx react-native bundle \
  --entry-file index.js \
  --bundle-output output.js \
  --platform ios \
  --sourcemap-output output.js.map \
  --dev false --minify true

npx source-map-explorer output.js --no-border-checks
  • bundle-barrel-exports.md - 避免使用 barrel 导入
  • bundle-analyze-js.md - JS 包可视化
  • bundle-tree-shaking.md - 死代码消除
  • bundle-r8-android.md - Android 代码缩减
  • bundle-hermes-mmap.md - 禁用包压缩
TTI 优化（HIGH）
  • native-measure-tti.md - TTI 测量设置
  • bundle-hermes-mmap.md - 启用 Hermes mmap
  • 使用 InteractionManager 延后非关键工作
原生性能（HIGH）
  • iOS：Xcode Instruments → Time Profiler
  • Android：Android Studio → CPU Profiler
  • native-turbo-modules.md - 构建高性能原生模块
  • native-threading-model.md - Turbo Module 线程
  • native-profiling.md - 平台性能分析指南
内存管理（MEDIUM）
  • js-memory-leaks.md - 排查 JS 内存泄漏
  • native-memory-leaks.md - 原生内存泄漏
  • native-memory-patterns.md - C++/Swift/Kotlin 内存模式
动画（MEDIUM）
  • js-animations-reanimated.md - Reanimated worklet

问题 → 解决方案对照

问题Vercel 规则Callstack 参考资料
应用崩溃rendering-no-falsy-and、rendering-text-in-text-component-
列表滚动卡顿list-performance-*js-lists-flatlist-flashlist.md
动画丢帧animation-gpu-propertiesjs-animations-reanimated.md
重新渲染过多react-state-minimizejs-profile-react.md、js-react-compiler.md
启动缓慢（TTI）-native-measure-tti.md、bundle-hermes-mmap.md
应用体积过大-bundle-analyze-app.md、bundle-r8-android.md
内存持续增长-js-memory-leaks.md、native-memory-leaks.md
TextInput 卡顿-js-uncontrolled-components.md
原生模块运行缓慢-native-turbo-modules.md

文件结构

react-native/
├── SKILL.md          # This file
├── AGENTS.md         # Full 74KB compiled Vercel guide
├── rules/            # 36 individual Vercel rule files
│   ├── list-performance-*.md
│   ├── animation-*.md
│   ├── ui-*.md
│   └── ...
└── references/       # 27 Callstack reference files
    ├── js-*.md
    ├── native-*.md
    ├── bundle-*.md
    └── images/

致谢

内容整合自：

  • Callstack 的《The Ultimate Guide to React Native Optimization》
  • Vercel 的 React Native Skills

评论

支持 Markdown