跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.70

Pressable

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

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

原理

在被 Pressable 包装的元素上:

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

  1. 用户移开手指,依次触发onPressOutonPress事件。
  2. 按压持续 500 毫秒以上,触发onLongPress 事件。(onPressOut 在移开手后依旧会触发。)
Diagram of the onPress events in sequence.

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

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

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

Diagram of HitRect and PressRect and how they work.
hitSlop 设置 HitRect; 用 pressRetentionOffset 设置 PressRect

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

示例

Props

android_disableSound
Android

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

TypeRequiredDefault
booleanNofalse

android_ripple
Android

使用并配置 Android 波纹效果。

TypeRequired
RippleConfigNo

children

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

TypeRequired
React NodeNo

delayLongPress

onPressIn 触发到 onLongPress 被调用的时间间隔(毫秒)。

TypeRequiredDefault
numberNo500

disabled

是否禁用按压行为。

TypeRequiredDefault
booleanNofalse

hitSlop

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

TypeRequired
Rect or numberNo

onLongPress

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

TypeRequired
PressEventNo

onPress

onPressOut 之后调用。

TypeRequired
PressEventNo

onPressIn

onPressOutonPress 之前, 按压后立即调用。

TypeRequired
PressEventNo

onPressOut

松开手后调用。

TypeRequired
PressEventNo

pressRetentionOffset

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

TypeRequiredDefault
Rect or numberNo{ bottom: 30, left: 20, right: 20, top: 20 }

style

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

TypeRequired
ViewStylePropNo

testOnly_pressed

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

TypeRequiredDefault
booleanNofalse

类型定义

RippleConfig

android_ripple 属性的波纹效果配置。

Type
object

Properties:

NameTypeRequiredDescription
colorcolorNo定义波纹的颜色。
borderlessbooleanNo定义波纹效果是否包含边框。
radiusnumberNo定义波纹的半径。