Pressable

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

¥Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.

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

怎么运行的

¥How it works

在 Pressable 封装的元素上：

¥On an element wrapped by Pressable:

• 当按下按钮时，会调用 onPressIn。

  ¥onPressIn is called when a press is activated.

• 按下手势停用时调用 onPressOut。

  ¥onPressOut is called when the press gesture is deactivated.

按 onPressIn 后，将发生以下两种情况之一：

¥After pressing onPressIn, one of two things will happen:

1. 该人将移开手指，触发 onPressOut，然后触发 onPress。

   ¥The person will remove their finger, triggering onPressOut followed by onPress.

2. 如果用户在移开手指之前离开手指的时间超过 500 毫秒，则会触发 onLongPress。（当他们移开手指时，onPressOut 仍然会开火。）

   ¥If the person leaves their finger longer than 500 milliseconds before removing it, onLongPress is triggered. (onPressOut will still fire when they remove their finger.)

手指并不是最精确的仪器，用户经常会意外激活错误的元素或遗漏激活区域。为了提供帮助，Pressable 有一个可选的 HitRect，你可以使用它来定义触摸可以在距离封装元素多远的地方注册。压力机可以从 HitRect 内的任何位置开始。

¥Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, Pressable has an optional HitRect you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a HitRect.

PressRect 允许按压移动到元素及其 HitRect 之外，同时保持激活并符合 "press" 的条件 — 想象一下将手指慢慢滑离按下的按钮。

¥PressRect allows presses to move beyond the element and its HitRect while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.

触摸区域永远不会超出父视图边界，并且如果触摸击中两个重叠视图，则同级视图的 Z 索引始终优先。

¥The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.

You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.

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

¥Pressable uses React Native's Pressability API. For more information around the state machine flow of Pressability and how it works, check out the implementation for Pressability.

示例

¥Example

属性

¥Props

android_disableSound

Android

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

¥If true, doesn't play Android system sound on press.

类型	默认
boolean	false

android_ripple

Android

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

¥Enables the Android ripple effect and configures its properties.

类型
RippleConfig

children

要么是子函数，要么是接收反映组件当前是否被按下的布尔值的函数。

¥Either children or a function that receives a boolean reflecting whether the component is currently pressed.

类型
React 节点

unstable_pressDelay

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

¥Duration (in milliseconds) to wait after press down before calling onPressIn.

类型
number

delayLongPress

从 onPressIn 到调用 onLongPress 之前的持续时间（以毫秒为单位）。

¥Duration (in milliseconds) from onPressIn before onLongPress is called.

类型	默认
number	500

disabled

是否禁用按下行为。

¥Whether the press behavior is disabled.

类型	默认
boolean	false

hitSlop

设置可以检测到按下的元素外部的附加距离。

¥Sets additional distance outside of element in which a press can be detected.

类型
矩形 或号码

onHoverIn

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

¥Called when the hover is activated to provide visual feedback.

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

onHoverOut

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

¥Called when the hover is deactivated to undo visual feedback.

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

onLongPress

如果 onPressIn 之后的时间持续超过 500 毫秒，则调用。该时间段可以使用 delayLongPress 进行定制。

¥Called if the time after onPressIn lasts longer than 500 milliseconds. This time period can be customized with delayLongPress.

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

onPress

在 onPressOut 之后调用。

¥Called after onPressOut.

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

onPressIn

当触摸发生时，在 onPressOut 和 onPress 之前立即调用。

¥Called immediately when a touch is engaged, before onPressOut and onPress.

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

onPressOut

释放触摸时调用。

¥Called when a touch is released.

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

pressRetentionOffset

此视图之外的附加距离，其中在触发 onPressOut 之前触摸被视为按下。

¥Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered.

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

style

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

¥Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.

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

testOnly_pressed

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

¥Used only for documentation or testing (e.g. snapshot testing).

类型	默认
boolean	false

类型定义

¥Type Definitions

RippleConfig

android_ripple 属性的波纹效果配置。

¥Ripple effect configuration for the android_ripple property.

类型
object

属性：

¥Properties:

名称	类型	必需的	描述
color	color	不	定义波纹效果的颜色。
borderless	boolean	不	定义波纹效果是否不应包含边框。
radius	number	不	定义波纹效果的半径。
foreground	boolean	不	设置为 true 可将波纹效果添加到视图的前景而不是背景。如果你的子视图之一有自己的背景，或者你是例如 显示图片，并且你不希望波纹被它们覆盖。