Pressable

Pressable 是一个核心组件的封装,它可以检测到任意子组件的不同阶段的按压交互情况。

<Pressable onPress={onPressFunction}>
<Text>I'm pressable!</Text>
</Pressable>

原理#

在被 Pressable 包装的元素上:

在按下 onPressIn 后,将会出现如下两种情况的一种:

  1. 用户移开手指,紧随 onPress 之后触发 onPressOut 事件。
  2. 按压持续 500 毫秒以上,触发onLongPress 事件。(onPressOut 在移开手后依旧会触发。)
Diagram of the onPress events in sequence.

手指的精准度终究不是很精确,人们经常会不小心按错了或者错过了触发区域。为了帮助解决这个问题, Pressable 提供了一个可选项 HitRect ,可以用来定义相对于包裹元素的有效触发距离。在 HitRect 内的任何地方都可以触发按压动作。

PressRect 在保持激活状态的同时,允许用户按压时在元素及设定的范围内滑动,使触控更加优雅。试想一下缓慢地滑动着离开按下的按钮。

触控区域不会超出绑定的父级 view,在按压到重叠的兄弟视图时,z-index 更高的那个视图会更优先。

Diagram of HitRect and PressRect and how they work.
hitSlop 设置 HitRect; 用 pressRetentionOffset 设置 PressRect

Pressable 使用了 React Native 的 Pressability API。查看Pressability示例,获取更多关于 Pressability 的状态机流程和原理。

示例#

Props#

android_disableSound
Android
#

为 true 时,按下不会播放 Android 系统声音。

TypeRequiredDefault
booleanNofalse

android_ripple
Android
#

使用并配置 Android 波纹效果。

TypeRequired
RippleConfigNo

children#

接收按压状态布尔值的子节点。

TypeRequired
React NodeNo

delayLongPress#

onPressIn 触发到 onLongPress 被调用的时间间隔(毫秒)。

TypeRequiredDefault
numberNo500

disabled#

是否禁用按压行为。

TypeRequiredDefault
booleanNofalse

hitSlop#

设置元素能够检测到按压动作的额外距离。

TypeRequired
Rect or numberNo

onLongPress#

onPressIn 持续超过 500 毫秒后调用。此持续时间可以通过 delayLongPress 自定义。

TypeRequired
PressEventNo

onPress#

onPressOut 之后调用。

TypeRequired
PressEventNo

onPressIn#

onPressOutonPress 之前, 按压后立即调用。

TypeRequired
PressEventNo

onPressOut#

松开手后调用。

TypeRequired
PressEventNo

pressRetentionOffset#

onPressOut 被触发前,view 额外的有效触控距离。

TypeRequiredDefault
Rect or numberNo{ bottom: 30, left: 20, right: 20, top: 20 }

style#

可使用普通视图样式,或者一个函数来根据按压状态布尔值返回视图样式。

TypeRequired
ViewStylePropNo

testOnly_pressed#

仅用于指导文档或测试 (比如快照测试)。

TypeRequiredDefault
booleanNofalse

类型定义#

RippleConfig#

android_ripple 属性的波纹效果配置。

Type
object

Properties:

NameTypeRequiredDescription
colorcolorNo定义波纹的颜色。
borderlessbooleanNo定义波纹效果是否包含边框。
radiusnumberNo定义波纹的半径。