Pressto交互状态解析isPressed、isToggled、isSelected如何让按钮拥有记忆【免费下载链接】presstoYour React Native app deserves better tap interactions.项目地址: https://gitcode.com/gh_mirrors/pre/presstoPressto 是一个运行在主线程上的 React Native 按钮动画库通过内置的 isPressed、isToggled、isSelected 三种交互状态让按钮既能给出按下去的瞬间反馈又能记住开关与选中的持久状态全程无需手写 useState。本文带你逐个解析这三个状态的工作机制并用 3 步写出带记忆的按钮。为什么按钮需要记忆React Native 按钮的一个常见痛点手指按下时希望按钮有被按下的缩放或变暗反馈手指抬起后又希望部分按钮记住状态——比如已收藏还是未收藏、Tab 当前选中哪一个。Pressto 的巧妙之处在于它把三种状态直接封装进每个 pressable 组件你在动画函数里直接读取即可状态切换全部由库自动维护。状态生命周期触发时机是否持久典型场景isPressed瞬时手指按下 → 抬起❌按压缩放、变暗反馈isToggled持久每次点击自动翻转✅开关、收藏、静音isSelected持久组内最后被点中✅Tab 切换、单选列表isPressed手指按下的那一刻isPressed 最直观手指按下瞬间为 true抬起即恢复 false并驱动 0→1 的动画进度值 progress内置的缩放、透明度假动画就是靠它。在源码 src/pressables/base.tsx 中active共享值在按下onPressIn时被设为 true而onEnded、onCancelled、onFailed事件统一映射到 onPressOut——这意味着手指滑出按钮区域或长按失败都会视为抬起按钮不会卡在按压状态。另外在 Web 平台启用activateOnHover后鼠标悬停也会激活按压状态让桌面端同样有动效反馈。isToggled每次点击翻转的开关记忆isToggled 是记忆的核心每点一次就在 true / false 之间自动翻转并且跨点击保留。初始值可由initialToggled属性设置默认 false适合默认已静音之类的场景。翻转逻辑就在 src/pressables/base.tsx 的按下处理器里每次成功点击执行isToggled.set(!isToggled.get())你完全不用手动管理状态。这个行为有完善的单元测试守护见 src/tests/handlers.test.tsx——连续点击三次状态依次为 true、false、true。isSelected组内最后选中的标记isSelected 专为按钮组设计组内任意一个按钮被点击后只有它是 true之前选中的自动变 false。你不需要维护 selected 索引或数组库内部用共享的最后被触碰标识做了这件事。其派生逻辑同样在 src/pressables/base.tsx 中将 src/provider/context.ts 里 PressablesGroupContext 提供的lastTouchedPressable共享值与自身唯一 ID 比对相等即处于选中态。三步写出带记忆的按钮创建自定义 pressable用createAnimatedPressable包装一个动画函数定义于 src/pressables/hoc.tsx。读取三个状态从 options 中解构 isPressed、isToggled、isSelected。交给 withAnimationoptions 自带预配置的动画函数颜色和数值变化都会自动平滑过渡。一个最小的切换按钮示例const ToggleButton createAnimatedPressable((progress, options) { worklet; const { isPressed, isToggled, isSelected, withAnimation } options; return { backgroundColor: withAnimation(isToggled ? #4CAF50 : #2196F3), opacity: isPressed ? 0.8 : 1, borderWidth: isSelected ? 3 : 0, }; });⚠️ 注意动画函数首行必须写worklet;指令否则动画无法运行在主线程。除了在动画函数里用事件回调也能读取这三个状态onPress/onPressIn/onPressOut都会收到{ isPressed, isToggled, isSelected, metadata }快照类型定义见 src/provider/context.ts非常适合埋点上报或触发副作用。快速参考完整状态与属性说明README.md 的 API Reference 部分交互状态可运行的示例应用example/app/index.tsx、example/app/screen.tsx状态行为的单元测试src/tests/handlers.test.tsx【免费下载链接】presstoYour React Native app deserves better tap interactions.项目地址: https://gitcode.com/gh_mirrors/pre/pressto创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考