Pressto React Native Pressable 动画组件迁移指南：从 v0.3 到 v0.7 平滑升级不踩坑的完整清单

Pressto React Native Pressable 动画组件迁移指南：从 v0.3 到 v0.7 平滑升级不踩坑的完整清单

【免费下载链接】presstoYour React Native app deserves better tap interactions.项目地址: https://gitcode.com/gh_mirrors/pre/pressto

Pressto 是一款基于 Reanimated 与 gesture-handler 的 React Native Pressable 动画组件库，让你的按钮像原生一样 60fps 缩放、淡入。本文是一份 Pressto 迁移指南：从 v0.3 升到 v0.7，共 4 处必改点 + 4 个新特性，照这份清单逐条过一遍，升级基本零踩坑。

版本演进一览：v0.3 → v0.7 改了什么

💡 好消息：官方为升级用户提供了向后兼容测试守卫，旧版写法（不带metadata的onPress等）在 v0.7 中依然可用，见 backward-compat.test.tsx。

第 1 步：一次性升级依赖

v0.7 依赖Reanimated 4.x，它把动画引擎拆到了react-native-worklets包中——这是从 v0.3（Reanimated 3.x）升级时最容易被忽略的一环。

bun add pressto react-native-reanimated react-native-gesture-handler react-native-worklets

用 pnpm / npm 的把bun add换成对应命令即可。四个包缺一不可，少了react-native-worklets会在运行时直接报错。

第 2 步：修复破坏性变更 ——progress不再需要.get()

v0.5 起，createAnimatedPressable回调里的progress从SharedValue<number>改成了普通数字（0 静息 → 1 按下）。所有自定义 Pressable 里写progress.get()的地方都要改成直接用progress：

const MyPressable = createAnimatedPressable((progress) => { 'worklet'; - return { opacity: progress.get() * 0.5 }; + return { opacity: progress * 0.5 }; });

⚠️注意'worklet';指令不能删。动画函数必须运行在 UI 线程，漏写会导致动画静默失效——建议顺手装上配套的 eslint-plugin-pressto，让它在开发期自动报错。

第 3 步：把PressablesConfig的config改为animationConfig

v0.6 中，用来配置动画参数（damping、stiffness、duration 等）的属性从config更名为animationConfig，避免与视觉配置语义混淆：

<PressablesConfig animationType="spring" - config={{ damping: 30, stiffness: 200 }} + animationConfig={{ damping: 30, stiffness: 200 }} >

📌 记忆技巧：animationConfig管"怎么动"，config管"动多少"（minScale、activeOpacity、baseScale，默认值见 constants.ts）。

第 4 步：用disabled替换enabled

v0.7 引入了符合 React Native 习惯的disabled属性，enabled被标记为废弃（仍可用，不会崩）。建议统一替换：

- <PressableScale enabled={loading === false}> + <PressableScale disabled={loading}>

规则细节：disabled优先级高于enabled；同时传两者时以disabled为准。该逻辑实现于 base.tsx，单测覆盖见 disabled.test.tsx。

第 5 步（可选）：顺手用上 v0.7 新特性

升级完成后，以下 4 个新能力可以让你少写很多胶水代码：

1. 组件级metadata：给某个按钮标记metadata={{ name: 'checkout' }}，在全局globalHandlers里精准识别是哪个 Pressable 触发，非常适合埋点场景（定义见 context.ts）；
2. skipGlobalHandlers：让单个按钮退出全局震动/埋点，自身onPress照常触发；
3. 组件级config：<PressableScale config={{ minScale: 0.9 }} />只覆盖一个键，其余仍继承全局配置；
4. e2e 测试友好：testID会自动透传为原生accessibilityIdentifier，Maestro / Detox 直接可用。

升级后回归测试清单 ✅

• 全局搜索progress.get()，确认已全部改为progress
• 全局搜索PressablesConfig，动画参数已换成animationConfig
• 全局搜索enabled=，评估替换为disabled
• 每个自定义 Pressable 动画函数首行都有'worklet';
• 运行tsc类型检查 + Jest 测试套件
• 真机点一遍：列表内按钮、带disabled的按钮、全局震动反馈均正常

常见问题速答

Q：旧版onPress回调只读三个状态字段，v0.7 还兼容吗？兼容。options对象只是新增了可选的metadata字段，旧签名不受影响。

Q：PressablesConfig不包会怎样？可以。所有配置都有默认值（timing 动画、minScale: 0.96、activeOpacity: 0.5），组件开箱即用。

Q：列表里按钮按压会闪烁？请从react-native-gesture-handler导入FlatList（而非原生版本），Pressto 基于 gesture-handler 的BaseButton构建，能自动处理与滚动的手势冲突。

迁移完成！

至此，你的 Pressto 已从 v0.3 平滑升级到 v0.7。完整的 API 参考（createAnimatedPressable、PressablesConfig全部属性）都在 README.md 中，配套示例可参考 example/app/screen.tsx。升级顺利的话，欢迎在 issue 区点赞反馈 🎉

【免费下载链接】presstoYour React Native app deserves better tap interactions.项目地址: https://gitcode.com/gh_mirrors/pre/pressto