mcpField
A
animating-react-native-expo

animating-react-native-expo

github.com/tristanmanchester设计与 UI4416 次安装7 周前更新
代码仓库

关于 animating-react-native-expo

面向 React Native 应用实现和验证动效，目标技术栈为 Reanimated 4 与 RNGH 3。内容涵盖 API 选择、手势生命周期、无障碍处理，以及依据项目实际原生依赖进行测试。

主要功能

  1. 01选择 CSS、布局或 worklet 驱动方式
  2. 02处理手势与动画状态
  3. 03遵循减少动态效果设置
  4. 04管理 worklet 与跨运行时回调
  5. 05测试生命周期、无障碍与性能

适用场景

  1. 01为 React Native 应用添加手势交互
  2. 02为组件变化或布局重排添加动画
  3. 03修复取消和中断时的行为
  4. 04检查动效无障碍与运行时性能

安装

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

$npx skills add https://github.com/tristanmanchester/agent-skills --skill animating-react-native-expo

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

包含的文件

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

references/
css-transitions-and-animations.md
debugging-and-performance.md
gestures.md
layout-animations.md
recipes.md
setup-and-compat.md
worklets-and-threading.md

详细介绍

React Native 动效

根据驱动方式选择方案：状态变化使用 CSS 过渡，挂载/重排使用布局动画，手势/滚动/物理效果使用共享值和 worklet。将业务状态保留在 React/应用状态中，并避免将逐帧变化的值放入 React 渲染。对于不需要动画效果也更好的交互，不要强加动画。

检查实际技术栈

在安装任何内容之前，先阅读 package 和 lock 文件、原生架构/配置以及相关组件。使用包管理器的依赖树命令和当前的兼容性指南。 声明了某个包，并不能证明其原生二进制文件或 Babel 插件版本匹配。

此技能面向 Reanimated 4 和 RNGH 3。如果应用不在此技术栈上，请选择明确且受支持的升级方案，或沿用已安装版本的 API；不要混用不同代际的 API，也不要添加兼容性包装器。对于 Expo，请使用其 SDK 对应的安装解析方式，而不是单独将每个原生包升级到最新版本。参见设置。旧的字符串匹配设置检查器已移除；请依据实际依赖/构建证据，而不是一条显示“OK”的输出。

实现一个完整的交互

定义初始、激活、完成、取消、中断、禁用和减少动效状态。考虑布局边界、方向/尺寸变化、多点触控以及导航/卸载。选择明确的目标状态，不要根据进行中的动画值是否恰好非零来切换状态。

Gesture Handler 3 的 onDeactivate 会收到一个带有 canceled 的事件，而不是旧版的第二个成功参数。只有手势成功后才执行已提交的操作，并且即使手势从未激活，也要处理清理工作。动画完成并不能证明后端变更成功。操作待处理时要防止重复提交，并在应用状态中反映实际失败/恢复情况。

保持 worklet 闭包简洁。仅当函数定义在 React Native 运行时中时才使用 scheduleOnRN，例如导航函数或应用回调。不要传入在 worklet 内创建的函数，并假定它属于 JS。UI worklet 仍运行在 UI 线程上：耗费大量计算的操作可能阻塞渲染。

组合方式和当前 v3 语义请参阅手势约定，有意设计的起始模式请参阅示例方案。scripts/references/assets 下的路径属于已安装的技能目录，而不是应用中同名的目录。

无障碍动效与生命周期

在计时、弹簧、布局和 CSS 路径中遵循系统的减少动效策略。Reanimated 的 useReducedMotion() 会报告启动时的设置；它不是实时订阅。如果运行期间也需要应用设置变化，请使用应用的响应式 AccessibilityInfo 订阅，并在清理时移除监听器。为拖动/滑动操作提供非手势操作方式，并保留标签、焦点、禁用状态和点击区域。视觉上已平移的视图仍需要正确的交互和无障碍几何信息。

在组件卸载、移出屏幕、应用进入后台或减少动效策略禁用循环时，停止装饰性循环/帧回调。重置为有意义的静态状态。无障碍功能不能依赖特定帧率或退出效果完成。

验证

针对锁定的技术栈，对实际组件进行类型检查。测试成功、取消、中断、重复激活、待处理/错误结果、减少动效、屏幕阅读器替代方案和受支持的平台。在具有代表性的硬件上分析接近发布版本的构建；在 UI 线程上执行并不保证达到 60/120 fps。使用兼容 Hermes 的调试方式，不要使用 JSC Remote JS Debugging。

报告补丁、所选驱动方式/API、实际运行的测试以及尚需进行的设备检查。不要用依赖字符串或模拟动画来证明原生运行时行为。

定向参考

  • 设置：依赖项或原生构建不匹配。
  • 手势：v3 生命周期、组合或层级结构。
  • Worklets：跨运行时回调。
  • CSS：样式过渡／循环。
  • 布局：进入／退出／重排。
  • 实践方案：调整交互方式。
  • 性能：测得的帧问题。

审核的来源（2026-09-13）：上游 Reanimated 兼容性和 减少动画、 RNGH 3 迁移指南以及 Expo 集成。

评论

支持 Markdown