跳到主要内容

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 系统声音。

类型默认值
booleanfalse

android_ripple
Android
​

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

类型
RippleConfig

children​

可以是子组件，也可以是一个接收布尔值的函数，该布尔值反映组件当前是否被按下。

类型
React 节点

unstable_pressDelay​

按下后在调用 onPressIn 之前等待的持续时间（毫秒）。

类型
number

delayLongPress​

从 onPressIn 到调用 onLongPress 的持续时间（毫秒）。

类型默认值
number500

disabled​

是否禁用按下行为。

类型默认值
booleanfalse

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

onPressOut​

触摸释放时调用。

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

pressRetentionOffset​

在该视图之外的额外距离，在此距离内触摸被视为按下，然后才会触发 onPressOut。

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

style​

可以是视图样式，也可以是一个接收布尔值的函数，该布尔值反映组件当前是否被按下，并返回视图样式。

类型
View Style 或 ({ pressed: boolean }) => View Style

testOnly_pressed​

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

类型默认值
booleanfalse

类型定义​

RippleConfig​

android_ripple 属性的波纹效果配置。

类型
object

属性

名称类型必需描述
colorcolor否定义波纹效果的颜色。
borderlessboolean否定义波纹效果是否不包含边框。
radiusnumber否定义波纹效果的半径。
foregroundboolean否设置为 true 以将波纹效果添加到视图的前景，而不是背景。如果您有子视图拥有自己的背景，或者您正在显示图像，并且不希望波纹被它们覆盖，这会很有用。