Pressable

Pressable 是一个核心组件的封装，它可以检测到任意子组件的不同阶段的按压交互情况。

React JSX

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

原理

在被 Pressable 包装的元素上：

• onPressIn 在按压时被调用。
• onPressOut 在按压动作结束后被调用。

在按下 onPressIn 后，将会出现如下两种情况的一种：

1. 用户移开手指，依次触发onPressOut 和onPress事件。
2. 按压持续 500 毫秒以上，触发onLongPress 事件。(onPressOut 在移开手后依旧会触发。)

手指的精准度终究不是很精确，人们经常会不小心按错了或者错过了触发区域。为了帮助解决这个问题， Pressable 提供了一个可选项 HitRect ，可以用来定义相对于包裹元素的有效触发距离。在 HitRect 内的任何地方都可以触发按压动作。

PressRect 在保持激活状态的同时，允许用户按压时在元素及设定的范围内滑动，使触控更加优雅。试想一下缓慢地滑动着离开按下的按钮。

触控区域不会超出绑定的父级 view，在按压到重叠的兄弟视图时，z-index 更高的那个视图会更优先。

用 hitSlop 设置 HitRect； 用 pressRetentionOffset 设置 PressRect；

Pressable 使用了 React Native 的 Pressability API。查看Pressability示例，获取更多关于 Pressability 的状态机流程和原理。

示例

Props

android_disableSound

Android

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

Type	Required	Default
boolean	No	false

android_ripple

Android

使用并配置 Android 波纹效果。

Type	Required
RippleConfig	No

children

接收按压状态布尔值的子节点。

Type	Required
React Node	No

delayLongPress

从 onPressIn 触发到 onLongPress 被调用的时间间隔（毫秒）。

Type	Required	Default
number	No	500

disabled

是否禁用按压行为。

Type	Required	Default
boolean	No	false

hitSlop

设置元素能够检测到按压动作的额外距离。

Type	Required
Rect or number	No

onLongPress

在 onPressIn 持续超过 500 毫秒后调用。此持续时间可以通过 delayLongPress 自定义。

Type	Required
PressEvent	No

onPress

onPressOut 之后调用。

Type	Required
PressEvent	No

onPressIn

在 onPressOut 和 onPress 之前， 按压后立即调用。

Type	Required
PressEvent	No

onPressOut

松开手后调用。

Type	Required
PressEvent	No

pressRetentionOffset

在 onPressOut 被触发前，view 额外的有效触控距离。

Type	Required	Default
Rect or number	No	{ bottom: 30, left: 20, right: 20, top: 20 }

style

可使用普通视图样式，或者一个函数来根据按压状态布尔值返回视图样式。

Type	Required
ViewStyleProp	No

testOnly_pressed

仅用于指导文档或测试 (比如快照测试）。

Type	Required	Default
boolean	No	false

类型定义

RippleConfig

android_ripple 属性的波纹效果配置。

Type
object

Properties:

Name	Type	Required	Description
color	color	No	定义波纹的颜色。
borderless	boolean	No	定义波纹效果是否包含边框。
radius	number	No	定义波纹的半径。