mcpField
R
react-native-skills

react-native-skills

github.com/secondsky开发240481 次安装5 周前更新
代码仓库

关于 react-native-skills

面向构建或优化移动应用的开发者，提供 React Native 和 Expo 应用实践规则。内容覆盖性能、动画、导航、UI、状态、渲染、单体仓库和配置，并在各规则文件中提供示例。

主要功能

  1. 01列表与滚动性能指引
  2. 02动画与导航规则
  3. 03UI 与图像模式
  4. 04状态与渲染实践
  5. 05单体仓库及配置指引

适用场景

  1. 01构建 React Native 或 Expo 应用
  2. 02优化大型列表和滚动
  3. 03使用 Reanimated 实现动画
  4. 04组织含原生依赖的单体仓库

安装

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

$npx skills add https://github.com/secondsky/claude-skills --skill react-native-skills

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

包含的文件

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

AGENTS.md
metadata.json
README.md
rules/
_sections.md
_template.md
animation-derived-value.md
animation-gesture-detector-press.md
animation-gpu-properties.md
design-system-compound-components.md
fonts-config-plugin.md
imports-design-system-folder.md
js-hoist-intl.md
list-performance-callbacks.md
list-performance-function-references.md
list-performance-images.md
list-performance-inline-objects.md
list-performance-item-expensive.md
list-performance-item-memo.md
list-performance-item-types.md
list-performance-virtualize.md
monorepo-native-deps-in-app.md
monorepo-single-dependency-versions.md
navigation-native-navigators.md
react-compiler-destructure-functions.md
react-compiler-reanimated-shared-values.md
react-state-dispatcher.md
react-state-fallback.md
react-state-minimize.md
rendering-no-falsy-and.md
rendering-text-in-text-component.md

详细介绍

React Native 技能

关于 React Native 和 Expo 应用的全面最佳实践。包含多个类别的规则，涵盖性能、动画、UI 模式和平台特定优化。

适用场景

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

  • 构建 React Native 或 Expo 应用
  • 优化列表和滚动性能
  • 使用 Reanimated 实现动画
  • 处理图像和媒体
  • 配置原生模块或字体
  • 为包含原生依赖项的项目搭建单体仓库结构

按优先级划分的规则类别

优先级类别影响前缀
1列表性能严重list-performance-
2动画高animation-
3导航高navigation-
4UI 模式高ui-
5状态管理中react-state-
6渲染中rendering-
7单体仓库中monorepo-
8配置低fonts-, imports-

快速参考

1. 列表性能（严重）
  • list-performance-virtualize - 大型列表使用 FlashList
  • 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 - 为异构列表使用项类型
2. 动画（高）
  • animation-gpu-properties - 仅对 transform 和 opacity 设置动画
  • animation-derived-value - 使用 useDerivedValue 实现计算动画
  • animation-gesture-detector-press - 使用 Gesture.Tap 代替 Pressable
3. 导航（高）
  • navigation-native-navigators - 优先使用原生堆栈和原生标签页，而非 JS 导航器
4. UI 模式（高）
  • ui-expo-image - 所有图像均使用 expo-image
  • ui-image-gallery - 使用 Galeria 实现图像灯箱
  • ui-pressable - 使用 Pressable 代替 TouchableOpacity
  • ui-safe-area-scroll - 在 ScrollView 中处理安全区域
  • ui-scrollview-content-inset - 使用 contentInset 处理页眉
  • ui-menus - 使用原生上下文菜单
  • ui-native-modals - 尽可能使用原生模态框
  • ui-measure-views - 使用 onLayout，而非 measure()
  • ui-styling - 使用 StyleSheet.create 或 Nativewind
5. 状态管理（中）
  • react-state-minimize - 尽量减少状态订阅
  • react-state-dispatcher - 对回调使用分发器模式
  • react-state-fallback - 在首次渲染时显示后备内容
  • react-compiler-destructure-functions - 为 React Compiler 解构函数
  • react-compiler-reanimated-shared-values - 使用编译器处理共享值
6. 渲染（中）
  • rendering-text-in-text-component - 将文本放在 Text 组件中
  • rendering-no-falsy-and - 条件渲染时避免使用假值 &&
7. 单体仓库（中）
  • monorepo-native-deps-in-app - 将原生依赖项保留在应用包中
  • monorepo-single-dependency-versions - 在各个包中使用统一的依赖版本
8. 配置（低）
  • fonts-config-plugin - 使用配置插件添加自定义字体
  • imports-design-system-folder - 整理设计系统导入项
  • js-hoist-intl - 将 Intl 对象的创建提升到外层

使用方法

阅读各规则文件，了解详细说明和代码示例：

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

每个规则文件都包含：

  • 简要说明规则的重要性
  • 带有说明的错误代码示例
  • 带有说明的正确代码示例
  • 补充背景信息和参考资料

完整编译文档

查看包含所有规则详细内容的完整指南：AGENTS.md

评论

支持 Markdown