Pressable

Pressableは、定義された子のいずれかに対するさまざまな段階のプレスインタラクションを検出できるCore Componentラッパーです。

tsx

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

仕組み

Pressableでラップされた要素で

• onPressInは、プレスがアクティブになったときに呼び出されます。
• onPressOutは、プレスジェスチャーが非アクティブになったときに呼び出されます。

onPressInを押した後、次の2つのいずれかが発生します

1. ユーザーは指を離し、onPressOut、続いてonPressがトリガーされます。
2. ユーザーが指を離す前に500ミリ秒以上指を離さない場合、onLongPressがトリガーされます。（指を離すとonPressOutは引き続き発生します。）

指は最も正確な器具ではなく、ユーザーが誤って間違った要素をアクティブにしたり、アクティブ化領域を外したりすることはよくあります。これを支援するために、PressableにはオプションのHitRectがあり、タッチがラップされた要素からどの程度離れて登録できるかを定義するために使用できます。プレスはHitRect内のどこからでも開始できます。

PressRectを使用すると、プレスは要素とそのHitRectを超えて移動しながら、アクティブ化を維持し、「プレス」の資格を得ることができます。押しているボタンから指をゆっくりとスライドさせることを想像してください。

注

タッチエリアは親ビューの境界を超えることはなく、タッチが2つの重なり合うビューにヒットした場合、兄弟ビューのZインデックスが常に優先されます。

HitRectはhitSlopで設定し、PressRectはpressRetentionOffsetで設定できます。

情報

PressableはReact NativeのPressability APIを使用しています。Pressabilityのステートマシンのフローとその仕組みの詳細については、Pressabilityの実装を参照してください。

例

Props

android_disableSound

Android

trueの場合、プレス時にAndroidシステムのサウンドを再生しません。

型	デフォルト
boolean	false

android_ripple

Android

Androidのリップル効果を有効にし、そのプロパティを設定します。

型
RippleConfig

children

コンポーネントが現在押されているかどうかを反映するブール値を受け取る子または関数。

型
React Node

unstable_pressDelay

onPressInを呼び出す前に、押し下げてから待つ時間（ミリ秒単位）。

型
number

delayLongPress

onPressInからonLongPressが呼び出されるまでの時間（ミリ秒単位）。

型	デフォルト
number	500

disabled

プレスの動作が無効になっているかどうか。

型	デフォルト
boolean	false

hitSlop

要素の外側でプレスが検出できる追加の距離を設定します。

型
Rectまたは数値

onHoverIn

視覚的なフィードバックを提供するためにホバーがアクティブになったときに呼び出されます。

型
({ nativeEvent: MouseEvent }) => void

onHoverOut

視覚的なフィードバックを元に戻すためにホバーが非アクティブになったときに呼び出されます。

型
({ nativeEvent: MouseEvent }) => void

onLongPress

onPressInの後の時間が500ミリ秒より長く続いた場合に呼び出されます。この期間はdelayLongPressでカスタマイズできます。

型
({nativeEvent: PressEvent}) => void

onPress

onPressOutの後に呼び出されます。

型
({nativeEvent: PressEvent}) => void

onPressIn

タッチが開始された直後に、onPressOutおよびonPressの前に呼び出されます。

型
({nativeEvent: PressEvent}) => void

onPressMove

プレスの位置が移動したときに呼び出されます。

型
({nativeEvent: PressEvent}) => void

onPressOut

タッチが離されたときに呼び出されます。

型
({nativeEvent: PressEvent}) => void

pressRetentionOffset

onPressOutがトリガーされる前に、タッチがプレスと見なされるこのビューの外側の追加距離。

型	デフォルト
Rectまたは数値	{bottom: 30, left: 20, right: 20, top: 20}

style

ビューのスタイル、またはコンポーネントが現在押されているかどうかを反映するブール値を受け取り、ビューのスタイルを返す関数。

型
View Styleまたは({ pressed: boolean }) => View Style

testOnly_pressed

ドキュメントまたはテスト（例：スナップショットテスト）のみに使用されます。

型	デフォルト
boolean	false

型定義

RippleConfig

android_rippleプロパティのリップル効果設定。

型
object

プロパティ

名前	型	必須	説明
color	color	No	リップル効果の色を定義します。
borderless	boolean	No	リップル効果に境界線を含めるべきではないかどうかを定義します。
radius	number	No	リップル効果の半径を定義します。
foreground	boolean	No	リップル効果を背景ではなくビューのフォアグラウンドに追加する場合はtrueに設定します。これは、子ビューのいずれかに独自の背景がある場合や、画像を（例えば）表示している場合に、リップルがそれらに覆われたくない場合に便利です。