TouchableHighlight

ヒント

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

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

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

TouchableHighlightは、1つの子（ゼロまたは複数ではない）を持つ必要があります。複数の子コンポーネントを持たせたい場合は、それらを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

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

型
number

---

onHideUnderlay

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

型
function

---

onShowUnderlay

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

型
function

---

ref

マウント時に要素ノードが割り当てられる ref セッター。

---

style

型
View.style

---

underlayColor

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

型
color

---

hasTVPreferredFocus

iOS

(Apple TVのみ) TV preferred focus (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