TouchableWithoutFeedback

ヒント

タッチベースの入力を処理するための、より広範で将来性のある方法をお探しなら、Pressable APIをチェックしてください。

よほどの理由がない限り、使用しないでください。押下に応答するすべての要素は、タッチ時に視覚的なフィードバックを持つべきです。

TouchableWithoutFeedback は子を1つしかサポートしていません。複数の子コンポーネントを持たせたい場合は、それらをViewでラップしてください。重要なことに、TouchableWithoutFeedback はその子をクローンし、それにレスポンダープロパティを適用することで機能します。そのため、すべての中間コンポーネントがそれらのプロパティを基になるReact Nativeコンポーネントに渡す必要があります。

使用パターン

tsx
function MyComponent(props: MyComponentProps) {
  return (
    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableWithoutFeedback>;

例

リファレンス

Props

`accessibilityIgnoresInvertColors`
iOS

色反転がオンのときに、このビューを反転させるべきか否かを示す値です。true の値は、色反転がオンであってもビューが反転しないように指示します。

詳細については、アクセシビリティガイドを参照してください。

型
Boolean

`accessible`

true の場合、ビューがアクセシビリティ要素であることを示します。デフォルトでは、すべてのタッチ可能な要素はアクセシブルです。

型
bool

`accessibilityLabel`

ユーザーが要素を操作したときにスクリーンリーダーによって読み上げられるテキストを上書きします。デフォルトでは、ラベルはすべての子を走査し、すべてのTextノードをスペースで区切って蓄積することによって構築されます。

型
string

`accessibilityLanguage`
iOS

ユーザーが要素を操作する際にスクリーンリーダーが使用すべき言語を示す値です。BCP 47仕様に従う必要があります。

詳細はiOSの `accessibilityLanguage` ドキュメントを参照してください。

型
string

`accessibilityHint`

アクセシビリティヒントは、アクセシビリティラベルから結果が明確でない場合に、ユーザーがアクセシビリティ要素に対してアクションを実行したときに何が起こるかを理解するのに役立ちます。

型
string

`accessibilityRole`

accessibilityRole は、コンポーネントの目的を支援技術のユーザーに伝えます。

accessibilityRole は以下のいずれかになります：

'none' - 要素にロールがない場合に使用されます。
'button' - 要素がボタンとして扱われるべき場合に使用されます。
'link' - 要素がリンクとして扱われるべき場合に使用されます。
'search' - テキストフィールド要素も検索フィールドとして扱われるべき場合に使用されます。
'image' - 要素が画像として扱われるべき場合に使用されます。例えば、ボタンやリンクと組み合わせることができます。
'keyboardkey' - 要素がキーボードのキーとして機能する場合に使用されます。
'text' - 要素が変更できない静的なテキストとして扱われるべき場合に使用されます。
'adjustable' - 要素が「調整可能」な場合（例：スライダー）に使用されます。
'imagebutton' - 要素がボタンとして扱われるべきであり、かつ画像である場合に使用されます。
'header' - 要素がコンテンツセクションのヘッダーとして機能する場合（例：ナビゲーションバーのタイトル）に使用されます。
'summary' - アプリが最初に起動したときに、アプリの現在の状況を素早く要約するために要素を使用できる場合に使用されます。
'alert' - 要素がユーザーに提示される重要なテキストを含む場合に使用されます。
'checkbox' - 要素がチェック済み、未チェック、または混合チェック状態になり得るチェックボックスを表す場合に使用されます。
'combobox' - 要素がコンボボックスを表し、ユーザーが複数の選択肢の中から選択できる場合に使用されます。
'menu' - コンポーネントが選択肢のメニューである場合に使用されます。
'menubar' - コンポーネントが複数のメニューのコンテナである場合に使用されます。
'menuitem' - メニュー内の項目を表すために使用されます。
'progressbar' - タスクの進行状況を示すコンポーネントを表すために使用されます。
'radio' - ラジオボタンを表すために使用されます。
'radiogroup' - ラジオボタンのグループを表すために使用されます。
'scrollbar' - スクロールバーを表すために使用されます。
'spinbutton' - 選択肢のリストを開くボタンを表すために使用されます。
'switch' - オン/オフを切り替えることができるスイッチを表すために使用されます。
'tab' - タブを表すために使用されます。
'tablist' - タブのリストを表すために使用されます。
'timer' - タイマーを表すために使用されます。
'toolbar' - ツールバー（アクションボタンまたはコンポーネントのコンテナ）を表すために使用されます。

型
string

`accessibilityState`

支援技術のユーザーにコンポーネントの現在の状態を記述します。

詳細については、アクセシビリティガイドを参照してください。

型
オブジェクト: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}`

`accessibilityActions`

アクセシビリティアクションを使用すると、支援技術がコンポーネントのアクションをプログラムで呼び出すことができます。accessibilityActionsプロパティには、アクションオブジェクトのリストを含める必要があります。各アクションオブジェクトには、フィールド名とラベルを含める必要があります。

詳細はアクセシビリティガイドを参照してください。

型
array

`aria-busy`

要素が変更中であり、支援技術がユーザーに更新を通知する前に変更が完了するのを待つ可能性があることを示します。

型	デフォルト
boolean	false

`aria-checked`

チェック可能な要素の状態を示します。このフィールドは、混合チェックボックスを表すためにブール値または「mixed」文字列のいずれかを取ることができます。

型	デフォルト
boolean, 'mixed'	false

`aria-disabled`

要素が知覚可能であるが無効であり、編集またはその他の操作ができないことを示します。

型	デフォルト
boolean	false

`aria-expanded`

展開可能な要素が現在展開されているか折りたたまれているかを示します。

型	デフォルト
boolean	false

`aria-hidden`

要素が支援技術から隠されているかどうかを示します。

例えば、兄弟ビュー A と B を含むウィンドウで、ビュー B に aria-hidden を true に設定すると、VoiceOver は B 要素とその子を無視します。

型	デフォルト
boolean	false

`aria-label`

インタラクティブな要素にラベルを付ける文字列値を定義します。

型
string

`aria-live`
Android

要素が更新されることを示し、ユーザーエージェント、支援技術、およびユーザーがライブリージョンから期待できる更新の種類を記述します。

off アクセシビリティサービスはこのビューの変更をアナウンスすべきではありません。
polite アクセシビリティサービスはこのビューの変更をアナウンスすべきです。
assertive アクセシビリティサービスは進行中の音声を中断して、このビューの変更を直ちにアナウンスすべきです。

型	デフォルト
enum(`'assertive'`, `'off'`, `'polite'`)	`'off'`

`aria-modal`
iOS

VoiceOver がレシーバーの兄弟であるビュー内の要素を無視すべきかどうかを示すブール値。これは accessibilityViewIsModal プロパティよりも優先されます。

型	デフォルト
boolean	false

`aria-selected`

選択可能な要素が現在選択されているかどうかを示します。

型
boolean

`onAccessibilityAction`

ユーザーがアクセシビリティアクションを実行したときに呼び出されます。この関数への唯一の引数は、実行するアクションの名前を含むイベントです。

詳細はアクセシビリティガイドを参照してください。

型
function

`accessibilityValue`

コンポーネントの現在の値を表します。これはコンポーネントの値のテキスト説明である場合もあれば、スライダーやプログレスバーのような範囲ベースのコンポーネントの場合は範囲情報（最小値、現在値、最大値）を含みます。

詳細については、アクセシビリティガイドを参照してください。

型
オブジェクト: `{min: number, max: number, now: number, text: string}`

`aria-valuemax`

スライダーやプログレスバーなどの範囲ベースのコンポーネントの最大値を表します。accessibilityValue プロパティの max 値よりも優先されます。

型
number

`aria-valuemin`

スライダーやプログレスバーなどの範囲ベースのコンポーネントの最小値を表します。accessibilityValue プロパティの min 値よりも優先されます。

型
number

`aria-valuenow`

スライダーやプログレスバーなどの範囲ベースのコンポーネントの現在の値を表します。accessibilityValue プロパティの now 値よりも優先されます。

型
number

`aria-valuetext`

コンポーネントのテキスト記述を表します。accessibilityValue プロパティの text 値よりも優先されます。

型
string

`delayLongPress`

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

型
number

`delayPressIn`

タッチの開始から onPressIn が呼び出されるまでの時間（ミリ秒）です。

型
number

`delayPressOut`

タッチのリリースから onPressOut が呼び出されるまでの時間（ミリ秒）です。

型
number

`disabled`

trueの場合、このコンポーネントのすべてのインタラクションを無効にします。

型
bool

`hitSlop`

これは、ボタンからどれだけ離れた場所からタッチを開始できるかを定義します。これは、ボタンから離れるときに pressRetentionOffset に追加されます。

注

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

型
Rect または数値

`id`

このビューをネイティブコードから見つけるために使用されます。nativeID プロパティよりも優先されます。

型
string

`onBlur`

項目がフォーカスを失ったときに呼び出されます。

型
`({nativeEvent: TargetEvent}) => void`

`onFocus`

項目がフォーカスを受け取ったときに呼び出されます。

型
`({nativeEvent: TargetEvent}) => void`

`onLayout`

マウント時およびレイアウト変更時に呼び出されます。

型
`({nativeEvent: LayoutEvent}) => void`

`onLongPress`

onPressIn から370ミリ秒以上経過した場合に呼び出されます。この期間は、delayLongPress でカスタマイズできます。

型
function

`onPress`

タッチがリリースされたときに呼び出されますが、キャンセルされた場合（例：レスポンダーロックを奪うスクロールによるもの）は呼び出されません。最初の関数引数は PressEvent 形式のイベントです。

型
function

`onPressIn`

タッチ可能な要素が押されるとすぐに呼び出され、onPressよりも前に呼び出されます。これはネットワークリクエストを行う際に役立ちます。最初の関数引数は PressEvent 形式のイベントです。

型
function

`onPressOut`

onPressよりも前に、タッチがリリースされるとすぐに呼び出されます。最初の関数引数は PressEvent 形式のイベントです。

型
function

`pressRetentionOffset`

スクロールビューが無効になっている場合、これはボタンを非アクティブ化するまでに、タッチがボタンからどれだけ離れて移動できるかを定義します。非アクティブ化されたら、元に戻そうとすると、ボタンが再びアクティブ化されることがわかります！スクロールビューが無効になっている間、何度か前後させてください。メモリ割り当てを減らすために定数を渡すことを確認してください。

型
Rect または数値

`nativeID`

型
string

`testID`

E2Eテストでこのビューを特定するために使用されます。

型
string

`touchSoundDisabled`
Android

trueの場合、タッチ時にシステムサウンドを再生しません。

型
Boolean

使用パターン​

例​

リファレンス

Props​

accessibilityIgnoresInvertColors iOS​

accessible​

accessibilityLabel​

accessibilityLanguage iOS​

accessibilityHint​

accessibilityRole​

accessibilityState​

accessibilityActions​

aria-busy​

aria-checked​

aria-disabled​

aria-expanded​

aria-hidden​

aria-label​

aria-live Android​

aria-modal iOS​

aria-selected​

onAccessibilityAction​

accessibilityValue​

aria-valuemax​

aria-valuemin​

aria-valuenow​

aria-valuetext​

delayLongPress​

delayPressIn​

delayPressOut​

disabled​

hitSlop​

id​

onBlur​

onFocus​

onLayout​

onLongPress​

onPress​

onPressIn​

onPressOut​

pressRetentionOffset​

nativeID​

testID​

touchSoundDisabled Android​

使用パターン

例

Props

`accessibilityIgnoresInvertColors`
iOS

`accessible`

`accessibilityLabel`

`accessibilityLanguage`
iOS

`accessibilityHint`

`accessibilityRole`

`accessibilityState`

`accessibilityActions`

`aria-busy`

`aria-checked`

`aria-disabled`

`aria-expanded`

`aria-hidden`

`aria-label`

`aria-live`
Android

`aria-modal`
iOS

`aria-selected`

`onAccessibilityAction`

`accessibilityValue`

`aria-valuemax`

`aria-valuemin`

`aria-valuenow`

`aria-valuetext`

`delayLongPress`

`delayPressIn`

`delayPressOut`

`disabled`

`hitSlop`

`id`

`onBlur`

`onFocus`

`onLayout`

`onLongPress`

`onPress`

`onPressIn`

`onPressOut`

`pressRetentionOffset`

`nativeID`

`testID`

`touchSoundDisabled`
Android