TouchableHighlight

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

Viewがタッチに適切に反応するようにするためのラッパーです。押下されると、ラップされたViewの不透明度が低下し、アンダーレイカラーが透けて見えるようになり、Viewが暗くなったり色がかったりします。

アンダーレイは、子要素を新しいViewでラップすることによって作られます。これはレイアウトに影響を与える可能性があり、正しく使用しないと、例えばラップされたViewのbackgroundColorが明示的に不透明な色に設定されていない場合などに、望ましくない視覚的なアーティファクトを引き起こすことがあります。

TouchableHighlightは必ず1つの子要素を持つ必要があります（0個や2個以上は不可）。複数の子コンポーネントを持ちたい場合は、それらをViewでラップしてください。

tsx

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

<TouchableHighlight
  activeOpacity={0.6}
  underlayColor="#DDDDDD"
  onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableHighlight>;

使用例

---

リファレンス

Props

TouchableWithoutFeedback Props

TouchableWithoutFeedback Props を継承します。

---

activeOpacity

タッチがアクティブなときに、ラップされたViewの不透明度をいくつにするかを決定します。値は0から1の間でなければなりません。デフォルトは0.85です。underlayColor の設定が必要です。

型
number

---

onHideUnderlay

アンダーレイが非表示になった直後に呼び出されます。

型
function

---

onShowUnderlay

アンダーレイが表示された直後に呼び出されます。

型
function

---

style

型
View.style

---

underlayColor

タッチがアクティブなときに透けて見えるアンダーレイの色です。

型
color

---

hasTVPreferredFocus

iOS

(Apple TV のみ) TVの優先フォーカス（Viewコンポーネントのドキュメントを参照）。

型
bool

---

nextFocusDown

Android

TVの次のフォーカス（下）（Viewコンポーネントのドキュメントを参照）。

型
number

---

nextFocusForward

Android

TVの次のフォーカス（順方向）（Viewコンポーネントのドキュメントを参照）。

型
number

---

nextFocusLeft

Android

TVの次のフォーカス（左）（Viewコンポーネントのドキュメントを参照）。

型
number

---

nextFocusRight

Android

TVの次のフォーカス（右）（Viewコンポーネントのドキュメントを参照）。

型
number

---

nextFocusUp

Android

TVの次のフォーカス（上）（Viewコンポーネントのドキュメントを参照）。

型
number

---

testOnly_pressed

スナップショットテストに便利です。

型
bool