跳到主要内容

Pressable

Pressable 是一个核心组件封装器,可以检测其任何已定义子项上按压交互的各个阶段。

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

工作原理

在被 Pressable 包裹的元素上

  • 当按下被激活时,调用 onPressIn
  • 当按压手势被停用时,调用 onPressOut

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

  1. 用户将手指移开,触发 onPressOut,然后是 onPress
  2. 如果用户在移开手指之前将手指停留超过 500 毫秒,则触发 onLongPress。(当他们移开手指时,onPressOut 仍会触发。)
Diagram of the onPress events in sequence.

手指不是最精确的工具,用户经常会不小心激活错误的元素或错过激活区域。为了帮助解决这个问题,Pressable 有一个可选的 HitRect,您可以使用它来定义触摸可以注册到距离被包装元素多远。按压可以在 HitRect 内的任何地方开始。

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

注意

触摸区域永远不会超出父视图边界,并且如果触摸到两个重叠视图,兄弟视图的 Z 轴顺序始终优先。

Diagram of HitRect and PressRect and how they work.

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

信息

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

示例

属性

android_disableSound
Android

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

类型默认
布尔值false

android_ripple
Android

启用 Android 水波纹效果并配置其属性。

children

子项或一个接收布尔值(反映组件当前是否被按下)的函数。

unstable_pressDelay

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

类型
数字

delayLongPress

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

类型默认
数字500

disabled

按压行为是否被禁用。

类型默认
布尔值false

hitSlop

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

类型
矩形或数字

onHoverIn

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

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

onHoverOut

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

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

onLongPress

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

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

onPress

onPressOut 之后调用。

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

onPressIn

在触摸开始时立即调用,在 onPressOutonPress 之前。

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

onPressMove

当按压位置移动时调用。

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

onPressOut

当触摸释放时调用。

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

pressRetentionOffset

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

类型默认
矩形或数字{bottom: 30, left: 20, right: 20, top: 20}

style

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

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

testOnly_pressed

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

类型默认
布尔值false

类型定义

RippleConfig

android_ripple 属性的水波纹效果配置。

类型
对象

属性

姓名类型必需描述
颜色颜色定义水波纹效果的颜色。
borderless布尔值定义水波纹效果是否不包含边框。
radius数字定义水波纹效果的半径。
foreground布尔值设置为 true,将水波纹效果添加到视图的前景,而不是背景。如果您的某个子视图有自己的背景,或者您正在显示图像,并且不希望水波纹被它们覆盖,则此功能非常有用。