跳到主要内容

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 可将波纹效果添加到视图的前景，而不是背景。如果您child视图之一有自己的背景，或者您正在显示图像，并且您不希望波纹被它们覆盖，这将非常有用。