React Native基礎

Touchable系コンポーネント

Touchable系コンポーネント

ボタンではなく、画像などを「タップできるもの」としてアプリで使うにはTouchable系のコンポーネントを使います。
Touchable系コンポーネントはTouchableOpacity、TouchableHighlight、TouchableWithoutFeedbackの三種類がありますが、タップされたときの見た目の挙動以外はどれも同じようにタップの処理を行うことができます。

• TouchableOpacity：タップされると子要素を透明にする（activeOpacityで透明度を指定。デフォルトは0.2）
• TouchableHighlightタッチされると子要素をハイライトする（underlayColorで指定した色が背景色として表示される）
• TouchableWithoutFeedback：タッチされても見た目のフィードバックは行わない。このコンポーネントのみstyleを受け付けない。

なお、各コンポーネントではonPressに加え、onLongPressプロパティで長押しされた場合のイベントハンドラを別途指定することができます。

<TouchableOpacity
  onPress={() => {
    Alert.alert('sample', 'タップされました。')
  }}
  onLongPress={() => {
    Alert.alert('sample', '長押しされました。')
  }}
>
  <Text>TouchableOpacity</Text>
</TouchableOpacity>