Pressable
Pressable
是一个核心组件的封装,它可以检测到任意子组件的不同阶段的按压交互情况。
<Pressable onPress={onPressFunction}>
<Text>I'm pressable!</Text>
</Pressable>
原理
在被 Pressable
包装的元素上:
onPressIn
在按压时被调用。onPressOut
在按压动作结束后被调用。
在按下 onPressIn
后,将会出现如下两种情况的一种:
- 用户移开手指,依次触发
onPressOut
和onPress
事件。 - 按压持续 500 毫秒以上,触发
onLongPress
事件。(onPressOut
在移开手后依旧会触发。)
手指的精准度终究不是很精确,人们经常会不小心按错了或者错过了触发区域。为了帮助解决这个问题, Pressable
提供了一个可选项 HitRect
,可以用来定义相对于包裹元素的有效触发距离。在 HitRect
内的任何地方都可以触发按压动作。
PressRect
在保持激活状态的同时,允许用户按压时在元素及设定的范围内滑动,使触控更加优雅。试想一下缓慢地滑动着离开按下的按钮。
触控区域不会超出绑定的父级 view,在按压到重叠的兄弟视图时,z-index 更高的那个视图会更优先。
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 | 定义波纹的半径。 |