Pressable

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

tsx

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

工作原理

在被 Pressable 包装的元素上：

• onPressIn 在按压被激活时调用。
• onPressOut 在按压手势被停用时调用。

在按压 onPressIn 之后，会发生以下两种情况之一：

1. 用户移开手指，触发 onPressOut，随后调用 onPress。
2. 如果用户在移开手指之前停留超过 500 毫秒，则触发 onLongPress。（当他们移开手指时，onPressOut 仍然会触发。）

手指并不是最精确的工具，用户意外激活错误的元素或错过激活区域是很常见的。为了提供帮助，Pressable 具有一个可选的 HitRect，您可以使用它来定义触摸可以在距离包装元素多远的地方注册。按压可以在 HitRect 内的任何地方开始。

PressRect 允许按压移出元素及其 HitRect，同时保持激活状态并符合“按压”条件——想象将手指从按下的按钮上慢慢滑开。

触摸区域永远不会超出父视图边界，如果触摸命中两个重叠视图，兄弟视图的 Z-index 始终优先。

您可以使用 hitSlop 设置 HitRect，并使用 pressRetentionOffset 设置 PressRect。

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

示例

属性

android_disableSound

Android

如果为 true，按压时不播放 Android 系统声音。

类型	默认值
boolean	false

android_ripple

Android

启用 Android 涟漪效果并配置其属性。

类型
RippleConfig

children

子元素或一个接收布尔值（反映组件当前是否被按压）的函数。

类型
React 节点

unstable_pressDelay

按压开始后调用 onPressIn 之前的等待时长（毫秒）。

类型
number

delayLongPress

从 onPressIn 到调用 onLongPress 的时长（毫秒）。

类型	默认值
number	500

disabled

是否禁用按压行为。

类型	默认值
boolean	false

hitSlop

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

类型
Rect 或 number

onHoverIn

当悬停被激活以提供视觉反馈时调用。

类型
({ nativeEvent: MouseEvent }) => void

onHoverOut

当悬停被停用以撤销视觉反馈时调用。

类型
({ nativeEvent: MouseEvent }) => void

onLongPress

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

类型
({nativeEvent: PressEvent}) => void

onPress

在 onPressOut 之后调用。

类型
({nativeEvent: PressEvent}) => void

onPressIn

当触摸开始时立即调用，在 onPressOut 和 onPress 之前。

类型
({nativeEvent: PressEvent}) => void

onPressMove

当按压位置移动时调用。

类型
({nativeEvent: PressEvent}) => void

onPressOut

当触摸释放时调用。

类型
({nativeEvent: PressEvent}) => void

pressRetentionOffset

在此视图外部被视为按压的额外距离，直到触发 onPressOut。

类型	默认值
Rect 或 number	{bottom: 30, left: 20, right: 20, top: 20}

style

视图样式或一个接收布尔值（反映组件当前是否被按压）并返回视图样式的函数。

类型
视图样式 或 ({ pressed: boolean }) => 视图样式

testOnly_pressed

仅用于文档或测试（例如快照测试）。

类型	默认值
boolean	false

类型定义

RippleConfig

android_ripple 属性的涟漪效果配置。

类型
object

属性：

名称	类型	必填	描述
color	颜色	否	定义涟漪效果的颜色。
borderless	boolean	否	定义涟漪效果是否不应包含边界。
radius	number	否	定义涟漪效果的半径。
foreground	boolean	否	设置为 true 将涟漪效果添加到视图的前景而不是背景。如果您的某个子视图有自己的背景，或者您例如正在显示图像，并且不希望涟漪被它们覆盖，这很有用。