Pressable
Pressable 是一个核心组件包装器，能够检测其任意已定义子组件上的各种按压交互阶段。
<Pressable onPress={onPressFunction}>
<Text>我是可按压的！</Text>
</Pressable>
工作原理
在被 Pressable 包裹的元素上：
onPressIn会在按压开始时调用。onPressOut会在按压手势结束时调用。
在触发 onPressIn 后，会发生以下两种情况之一：
- 用户移开手指，触发
onPressOut，随后触发onPress。 - 如果用户在移开手指之前停留超过 500 毫秒，就会触发
onLongPress。（当他们移开手指时，onPressOut仍然会触发。）
手指并不是最精确的工具，用户经常会不小心激活错误的元素，或错过激活区域。为此，Pressable 提供了一个可选的 HitRect，你可以用它来定义触摸在距离包裹元素多远的位置内仍可被识别。按压可以从 HitRect 内的任意位置开始。
PressRect 允许按压在保持激活状态并仍可被视为一次“按压”的前提下，超出元素及其 HitRect 移动——可以把它想象成手指从正在按下的按钮上缓慢滑开。
触摸区域永远不会超出父视图边界；如果一次触摸命中两个重叠视图，兄弟视图的 Z-index 始终优先。
你可以使用 hitSlop 设置 HitRect，并使用 pressRetentionOffset 设置 PressRect。
Pressable使用 React Native 的PressabilityAPI。有关 Pressability 状态机流程及其工作方式的更多信息，请查看 Pressability 的实现。
示例
属性
android_disableSound Android
如果为 true，则在按压时不会播放 Android 系统音效。
| Type | Default |
|---|---|
| boolean | false |
android_ripple Android
启用 Android 涟漪效果并配置其属性。
| Type |
|---|
| RippleConfig |
children
子元素，也可以是一个接收布尔值的函数，用于表示组件当前是否处于按下状态。
| Type |
|---|
| React Node |
unstable_pressDelay
按下后，在调用 onPressIn 之前等待的时长（毫秒）。
| Type |
|---|
| number |
delayLongPress
从 onPressIn 开始到调用 onLongPress 之间的时长（毫秒）。
| Type | Default |
|---|---|
| number | 500 |
disabled
是否禁用按压行为。
| Type | Default |
|---|---|
| boolean | false |
hitSlop
设置元素外可检测到按压的额外距离。
| Type |
|---|
| Rect or number |
onHoverIn
在悬停激活时调用，以提供视觉反馈。
| Type |
|---|
({ nativeEvent: MouseEvent }) => void |
onHoverOut
在悬停取消激活时调用，以撤销视觉反馈。
| Type |
|---|
({ nativeEvent: MouseEvent }) => void |
onLongPress
如果 onPressIn 之后的时间超过 500 毫秒，则会调用。此时间段可通过 delayLongPress 自定义。
| Type |
|---|
({nativeEvent: PressEvent}) => void |
onPress
在 onPressOut 之后调用。
| Type |
|---|
({nativeEvent: PressEvent}) => void |
onPressIn
在触摸开始时立即调用，早于 onPressOut 和 onPress。
| Type |
|---|
({nativeEvent: PressEvent}) => void |
onPressMove
在按压位置移动时调用。
| Type |
|---|
({nativeEvent: PressEvent}) => void |
onPressOut
在触摸释放时调用。
| Type |
|---|
({nativeEvent: PressEvent}) => void |
pressRetentionOffset
在触发 onPressOut 之前，触摸在该视图外仍会被视为按压的额外距离。
| Type | Default |
|---|---|
| Rect or number | {bottom: 30, left: 20, right: 20, top: 20} |
style
可以是视图样式，也可以是一个接收布尔值的函数，用于表示组件当前是否处于按下状态，并返回视图样式。
| Type |
|---|
View Style or ({ pressed: boolean }) => View Style |
testOnly_pressed
仅用于文档或测试（例如快照测试）。
| Type | Default |
|---|---|
| boolean | false |
类型定义
RippleConfig
android_ripple 属性的涟漪效果配置。
| Type |
|---|
| object |
Properties:
| Name | Type | Required | Description |
|---|---|---|---|
| color | color | No | 定义涟漪效果的颜色。 |
| borderless | boolean | No | 定义涟漪效果是否不包含边框。 |
| radius | number | No | 定义涟漪效果的半径。 |
| foreground | boolean | No | 设置为 true 时，会将涟漪效果添加到视图前景，而不是背景。如果你的某个子视图本身有背景，或者你例如正在显示图片，并且不希望涟漪被它们遮挡，这会很有用。 |