【React Native】 길게 누름 탭시의 처리를 구현하고 싶다면 Button 대신 TouchableOpacity를 사용합니다.

안녕하세요!
이번에는 React Native의 길게 누르기 탭시의 처리에 대해 전하고 싶습니다.

개발 환경
· Expo SDK 38 (React Native 0.62)

길게 누르기 탭 처리는 onLongPress

onLongPress 는 TouchableOpacity 구성 요소의 props에 있습니다.
기본적으로는 onPress 와 사용법은 같습니다.
onPress와의 차이는onPress : 통상의 탭시의 처리onLongPress : 길게 누름 탭시의 처리

onLongPress를 작성하는 방법

예를 들어, 길게 누름 탭시 경고를 표시하는 처리를 구현하고 싶습니다.

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

구현하면 이런 느낌이 됩니다.

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입니다.

나도 구현한 적이 없기 때문에 공식 문서 링크만 붙여 둡니다. 흥미가 있는 분은 봐 주세요.
htps : // 레아 ct나치ゔぇ. v / cs / p 레사 b

참고문헌

React Native 공식 문서
htps : // 레아 ct나치ゔぇ. V / Docs / Tocha B ぇ 파시 ty