跳到主要内容
版本:Next

Pressable

Pressable 是一个核心组件包装器,可检测其任意已定义子元素上的各种按压交互阶段。

React TSX
<Pressable onPress={onPressFunction}>
<Text>我可以被按下!</Text>
</Pressable>

工作原理

在被 Pressable 包裹的元素上:

在按下 onPressIn 之后,会发生以下两种情况之一:

  1. 用户移开手指,触发 onPressOut,随后触发 onPress
  2. 如果用户在松开前持续按住超过 500 毫秒,则会触发 onLongPress。(在他们移开手指时,onPressOut 仍然会触发。)
按压事件顺序示意图。

手指并不是最精确的工具,用户常常会不小心点到错误的元素,或者错过激活区域。为了解决这个问题,Pressable 提供了可选的 HitRect,你可以用它来定义触摸在距离包装元素多远的位置内仍可被识别。按压可以从 HitRect 内的任意位置开始。

PressRect 允许按压在超出元素及其 HitRect 的范围内移动,同时仍保持激活状态并具备触发“按压”的资格——可以把它想象成,你的手指正缓慢地从一个正在按下的按钮上滑开。

备注

触摸区域永远不会超出父视图边界,并且当一次触摸同时命中两个重叠视图时,兄弟视图的 Z-index 始终具有优先级。

HitRect 和 PressRect 及其工作方式示意图。

你可以使用 hitSlop 设置 HitRect,并使用 pressRetentionOffset 设置 PressRect

信息

Pressable 使用 React Native 的 Pressability API。有关 Pressability 状态机流程及其工作方式的更多信息,请查看 Pressability 的实现。

示例

属性

android_disableSound
Android

如果为 true,则按下时不会播放 Android 系统音效。

TypeDefault
booleanfalse

android_ripple
Android

启用 Android ripple 效果并配置其属性。color 字段既接受普通颜色值,也接受 PlatformColor 值,因此你可以引用诸如 ?attr/colorAccent 之类的主题属性。当使用 PlatformColor 时,如果系统配置发生变化(例如在浅色和深色模式之间切换),ripple 会自动更新。

children

要么是子元素,要么是一个接收布尔值的函数,该布尔值表示组件当前是否处于按下状态。

unstable_pressDelay

在按下后、调用 onPressIn 之前等待的持续时间(毫秒)。

Type
number

delayLongPress

onPressIn 开始到调用 onLongPress 之间的持续时间(毫秒)。

TypeDefault
number500

disabled

是否禁用按压行为。

TypeDefault
booleanfalse

hitSlop

设置元素外部可检测到按压的额外距离。

Type
Rect or number

onHoverIn

在 hover 被激活时调用,以提供视觉反馈。

Type
({ nativeEvent: MouseEvent }) => void

onHoverOut

在 hover 被取消激活时调用,以撤销视觉反馈。

Type
({ nativeEvent: MouseEvent }) => void

onLongPress

如果 onPressIn 之后经过的时间超过 500 毫秒,则调用。此时间段可以通过 delayLongPress 自定义。

Type
({nativeEvent: PressEvent}) => void

onPress

onPressOut 之后调用。

Type
({nativeEvent: PressEvent}) => void

onPressIn

当触摸刚接触时立即调用,在 onPressOutonPress 之前。

Type
({nativeEvent: PressEvent}) => void

onPressMove

当按压位置移动时调用。

Type
({nativeEvent: PressEvent}) => void

onPressOut

当触摸释放时调用。

Type
({nativeEvent: PressEvent}) => void

pressRetentionOffset

在该视图外部,触摸在触发 onPressOut 之前仍被视为按压的额外距离。

TypeDefault
Rect or number{bottom: 30, left: 20, right: 20, top: 20}

style

要么是视图样式,要么是一个接收布尔值的函数,该布尔值表示组件当前是否处于按下状态,并返回视图样式。

Type
View Style or ({ pressed: boolean }) => View Style

testOnly_pressed

仅用于文档或测试(例如快照测试)。

TypeDefault
booleanfalse

类型定义

RippleConfig

android_ripple 属性的 ripple 效果配置。

Type
object

Properties:

NameTypeRequiredDescription
colorcolor or PlatformColorNo定义 ripple 效果的颜色。
borderlessbooleanNo定义 ripple 效果是否不包含边框。
radiusnumberNo定义 ripple 效果的半径。
foregroundbooleanNo设置为 true 可将 ripple 效果添加到视图前景,而不是背景。如果你的某个子视图本身带有背景,或者例如你正在显示图片,并且不希望 ripple 被它们遮挡,这会很有用。
alphanumberNo控制 ripple 的不透明度。接受介于 0.0(完全透明)和 1.0(完全不透明)之间的值。该值会叠加在颜色中已存在的任何 alpha 之上。