跳至主要内容

Pressable

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

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

工作原理​

在 Pressable 包裹的元素上

按下 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 波纹效果并配置其属性。

类型
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

onPressOut​

在触摸释放时调用。

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

pressRetentionOffset​

此视图外部的额外距离，在 onPressOut 触发之前，触摸在此范围内被视为按下。

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

style​

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

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

testOnly_pressed​

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

类型默认值
布尔值false

类型定义​

RippleConfig​

android_ripple 属性的波纹效果配置。

类型
对象

属性

名称类型必填描述
colorcolor否定义波纹效果的颜色。
borderless布尔值否定义波纹效果是否不包含边框。
radius数字否定义波纹效果的半径。
foreground布尔值否设置为 true 以将波纹效果添加到视图的前景，而不是背景。如果您的子视图之一具有自己的背景，或者您例如正在显示图像，并且您不希望波纹被它们覆盖，这将很有用。