メインコンテンツにスキップ

Pressable

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

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

仕組み​

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

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

onPressIn を押した後、次のいずれかの処理が行われます。

  1. 指を離すと、onPressOut がトリガーされ、続いて onPress がトリガーされます。
  2. 指を離すまでに500ミリ秒以上経過すると、onLongPress がトリガーされます。(指を離すと、onPressOut は引き続き発生します。)
Diagram of the onPress events in sequence.

指は最も正確な入力手段ではないため、ユーザーが誤って間違った要素をアクティブにしたり、アクティブ化領域を外したりすることがよくあります。これを回避するために、Pressable にはオプションの HitRect があり、ラップされた要素からどれだけ離れたタッチを登録できるかを定義できます。押下は HitRect 内の任意の場所から開始できます。

PressRect を使用すると、押下を要素とその HitRect の外に移動させることができます。アクティブ状態を維持し、「押下」の対象となります。押しているボタンから指をゆっくりとスライドさせることを考えてみてください。

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

Diagram of HitRect and PressRect and how they work.

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

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

例​

Props​

android_disableSound
Android
​

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

タイプデフォルト
booleanfalse

android_ripple
Android
​

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

タイプ
RippleConfig

children​

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

タイプ
React Node

unstable_pressDelay​

押下後、onPressIn を呼び出すまで待機する時間 (ミリ秒)。

タイプ
number

delayLongPress​

onPressIn から onLongPress が呼び出されるまでの時間 (ミリ秒)。

タイプデフォルト
number500

disabled​

押下動作が無効になっているかどうか。

タイプデフォルト
booleanfalse

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

onPressOut​

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

タイプ
({nativeEvent: PressEvent}) => void

pressRetentionOffset​

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

タイプデフォルト
Rect または number{bottom: 30, left: 20, right: 20, top: 20}

style​

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

タイプ
ビュースタイル または ({ pressed: boolean }) => ビュースタイル

testOnly_pressed​

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

タイプデフォルト
booleanfalse

型定義​

RippleConfig​

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

タイプ
object

プロパティ

名前タイプ必須説明
colorcolorいいえリップル効果の色を定義します。
borderlessbooleanいいえリップル効果に境界線を含めるかどうかを定義します。
radiusnumberいいえリップル効果の半径を定義します。
foregroundbooleanいいえリップル効果をビューの背景ではなく前景に追加するには、true に設定します。これは、子ビューのいずれかに独自の背景がある場合、または画像などを表示していて、リップルがそれらで覆われたくない場合に役立ちます。