mcpField
R
react-native-best-practices

react-native-best-practices

github.com/software-mansion-labs开发2975.7k 次安装2 周前更新
代码仓库

关于 react-native-best-practices

面向采用 New Architecture 的 React Native 开发者，按主题整理 Software Mansion 的开发模式，涵盖动画、手势、图形、AI、音频、文本、线程和 JSI。

主要功能

  1. 01按主题划分子技能
  2. 02动画与手势模式
  3. 03端侧 AI 与音频指南
  4. 04JSI 与多线程指南
  5. 05SVG 与富文本指南

适用场景

  1. 01实现触摸交互
  2. 02添加动画或 SVG 图形
  3. 03构建端侧 AI 或音频功能
  4. 04使用 JSI 和原生线程

安装

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

$npx skills add https://github.com/software-mansion-labs/skills --skill react-native-best-practices

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

包含的文件

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

README.md
references/animations/
animation-functions.md
animations-performance.md
animations.md
canvas-animations.md
canvas-atlas.md
css-pseudo-selectors.md
gpu-animations.md
layout-animations.md
scroll-and-events.md
svg-animations.md
references/audio/
audio.md
effects-and-analysis.md
playback.md
recording.md
system-and-notifications.md
worklets.md
references/enable-worklets-bundle-mode/references/
patching-bun.md
patching-patch-package.md
patching-pnpm.md
patching-yarn-berry.md
uniwind-remap-workaround.md
references/gestures/
continuous-gestures.md
gesture-composition.md
gestures.md
swipeable-and-drawer.md
tap-handling.md
testing.md
v2-to-v3-migration.md
references/jsi/
calling-js-and-async.md

详细介绍

React Native 最佳实践

Software Mansion 为采用 New Architecture 的 React Native 应用提供的生产实践模式。

请阅读与当前主题相关的子技能。所有子技能都位于 references/ 中。

子技能

子技能适用场景
references/animations/SKILL.mdCSS 过渡、CSS 动画、CSS 伪选择器和回调、共享值动画、GPU 着色器动画（WebGPU、TypeGPU）、布局动画（进入/退出、过渡、关键帧）、滚动驱动动画、动画函数（withSpring、withTiming、withDecay）、核心 Hook（useSharedValue、useAnimatedStyle）、插值、粒子系统、程序化噪声、SDF 渲染、动画性能、120fps、无障碍、Reanimated 4
references/gestures/SKILL.md点击、平移、捏合、旋转、滑动、长按、快速滑动、悬停、拖动、Pressable、RectButton、Swipeable、DrawerLayout、VirtualGestureDetector、手势组合、手势测试——任何使用 Gesture Handler 的触摸交互
references/svg/SKILL.md使用 React Native SVG 创建矢量图形、图标、图表和插图
references/on-device-ai/SKILL.md端侧 AI：大模型（聊天、工具调用、结构化输出、视觉语言模型）、计算机视觉（分类、目标检测、OCR、语义/实例分割、风格迁移、嵌入、文生图）、语音处理（带时间戳的 STT、带音素的 TTS、VAD）、VisionCamera 实时帧处理、模型加载、资源管理、使用 ExecuTorch 的自定义模型
references/rich-text/SKILL.md富文本编辑器、格式化文本输入、所见即所得、提及、HTML/Markdown 渲染、react-native-enriched-html（原名 react-native-enriched）、react-native-enriched-markdown
references/multithreading/SKILL.md多线程、react-native-worklets、后台处理、Worker Runtimes、UI 线程、scheduleOnUI、scheduleOnRN、Serializable、Synchronizable、将计算任务从 JS 线程卸载
references/enable-worklets-bundle-mode/SKILL.md在 Expo、RN CLI 或棕地应用中启用 react-native-worklets Bundle Mode（worklet 内的导入、worklet 运行时中的第三方 npm 库）：babel bundleMode 插件选项、bundleModeMetroConfig / getBundleModeMetroConfig、按包管理器应用必需的 metro 和 metro-runtime 补丁、“Failed to get the SHA-1” 错误、worklet 代码缺少 Fast Refresh、uniwind/NativeWind 解析器冲突
references/audio/SKILL.md音频播放（缓冲区源、振荡器、流式传输、排队播放）、录音（文件、数据回调、图处理）、音频效果（增益、滤波器、延迟、卷积器、声像器、波形整形器）、实时分析与可视化、音频 worklet（自定义处理、合成）、系统集成（会话、中断、通知、权限）、使用 mock 进行测试——任何使用 react-native-audio-api 的音频功能
references/jsi/SKILL.mdJSI、C++ 原生模块、jsi::Runtime、jsi::Value、jsi::Object、jsi::Function、jsi::HostObject、jsi::HostFunction、jsi::NativeState、jsi::PropNameID、jsi::ArrayBuffer、jsi::WeakObject、jsi::Scope、jsi::BigInt、JSIException、JSError、JSINativeException、从 C++ 调用 JS、从 JS 调用 C++、HostObject 析构函数限制、shared_ptrjsi::Value、CallInvoker、invokeAsync、JSI 线程安全、零拷贝 ArrayBuffer、rt.global()、ISerialization、WithRuntimeDecorator、jsi.h

评论

支持 Markdown