Pressable

Pressable は、定義されたすべての子要素に対する様々な段階のプレスインタラクションを検出できるコアコンポーネントラッパーです。

tsx

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

仕組み

Pressable でラップされた要素上で

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

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

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

指は最も精密な器具ではなく、ユーザーが誤って別の要素をアクティブ化したり、アクティブ化領域を外れたりすることはよくあります。これを助けるために、Pressable にはオプションの HitRect があり、ラップされた要素からどれだけ離れた場所でタッチを検出できるかを定義できます。プレスは HitRect 内のどこからでも開始できます。

PressRect は、プレスが要素とその HitRect を超えて移動しても、アクティブ化を維持し、「プレス」の対象となることを可能にします。これは、押しているボタンから指をゆっくりと離していくような状況を想像してください。

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

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

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 または number

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 または number	{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	いいえ	リップル効果の色を定義します。
borderless	boolean	いいえ	リップル効果に境界線を含めるべきかどうかを定義します。
radius	number	いいえ	リップル効果の半径を定義します。
foreground	boolean	いいえ	true に設定すると、リップル効果が背景ではなくビューのフォアグラウンドに追加されます。これは、子ビューのいずれかが独自の背景を持っている場合や、画像を_表示している_場合などで、リップルがそれらで覆われたくない場合に便利です。