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`

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

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

型
object: `{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`

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

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

型
object: `{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またはnumber

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

`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