跳到主要内容

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
安卓
​

如果为 true，则在按下时不安卓系统声音。

类型默认
布尔值false

android_ripple
安卓
​

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

类型
RippleConfig

children​

子项或一个接收布尔值（表示组件当前是否被按下）的函数。

类型
React 节点

unstable_pressDelay​

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

类型
数字

delayLongPress​

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

类型默认
数字500

disabled​

按下行为是否被禁用。

类型默认
布尔值false

hitSlop​

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

类型
Rect 或数字

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 或数字{bottom: 30, left: 20, right: 20, top: 20}

style​

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

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

testOnly_pressed​

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

类型默认
布尔值false

类型定义​

RippleConfig​

android_ripple 属性的涟漪效果配置。

类型
对象

属性

姓名类型必需描述
颜色颜色否定义涟漪效果的颜色。
无边框布尔值否定义涟漪效果是否不包括边框。
半径数字否定义涟漪效果的半径。
前景布尔值否设置为 true 以将涟漪效果添加到视图的前景，而不是背景。如果您的子视图之一有自己的背景，或者您正在显示图像等，并且不希望涟漪被它们覆盖，这会很有用。