プログラミング モバイルアプリ

【React Native】TouchableOpacityで長押しタップ時の処理を実装する

スポンサーリンク

みなさん、こんにちは!

こんにちは!
今回はReact Nativeにおける、長押しタップ時の処理について、お伝えしたいと思います。

開発環境
・Expo SDK 38(React Native 0.62)

長押しタップの処理はonLongPressを使う

TouchableOpacityコンポーネントにはpropsonLongPressを持っています。
基本的な書き方はonPressと使い方は同じです。

onPressとの違いについて
onPress:通常のタップ時の処理
onLongPress:長押しタップ時の処理

onLongPressの書き方

例として、長押しタップ時にアラートを表示する処理を実装したいと思います。

<code>export default function chatList() {
  return (
    <View>
      <TouchableOpacity
        onLongPress={() => {
          alert('長押しタップ成功!');
        }}
      >
        <Text style={{color: 'white', backgroundColor: 'blue', height: 30, fontSize: 30}}>
          ここを長押ししてください
        </Text>
      </TouchableOpacity>
    </View>
  );
}

実装したらこんな感じになります。


ReactNative_長押しタップ.gif

TouchableOpacityに囲われた部分(背景ブルーの部分)であれば、どこをタップしても大丈夫です。

ButtonコンポーネントではonLongPressは使えない

ちなみにButtonコンポーネントでは長押しタップの機能を持っていません。
例えば、以下のように記述した場合、タップしてもOpacityが変わるだけで、何も起きません。

export default function chatList() {
  return (
    <View>
      <Button
        title='モーダルを開きたい!'
        onLongPress={() => {
          alert('長押しタップ成功!');
        }}
      />
    </View>
  );
}

React Native 0.63ではPressableが追加され、タップ時の処理をより細かく分けられるように

残念ながら、2020年8月6日時点ではExpo SDKに対応していません。
(現時点での最新Expo SDK 38はReact Native 0.62です。)

私も実装したことないので、公式ドキュメントのリンクだけ貼っておきます。もし、ご興味のある方は見てみてください。
URL:https://reactnative.dev/docs/pressable

参考文献

React Native 公式ドキュメント
https://reactnative.dev/docs/touchableopacity

スポンサーリンク

-プログラミング, モバイルアプリ
-

© 2020 エンジニア×モチベアップ Powered by AFFINGER5