TouchableHighlight

タッチベースの入力をより包括的かつ将来性のある方法で処理したい場合は、Pressable API をご確認ください。

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

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

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

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>;

例

---

リファレンス

プロパティ

TouchableWithoutFeedback のプロパティ

TouchableWithoutFeedback のプロパティを継承します。

---

activeOpacity

タッチがアクティブなときに、ラップされたビューの不透明度をどの程度にするかを決定します。値は 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