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 |