RN - React Native 제스처 핸들러

<GestureDetector gesture={doubleTap}>
                <Animated.Image
                source={stickerSource}
                resizeMode = "contain"
                style={[imageStyle, {width : imageSize, height : imageSize}]} 
                />
            </GestureDetector>

React Native 제스처 핸들러

- 제스처를 처리할 수 있는 기본 제공 네이티브 컴포넌트를 제공

- 기본 터치 처리 시스템을 사용하여 팬, 탭, 회전 및 기타 제스처를 인식

 

1. GestureHandlerRootView 추가

- 앱에서 제스처 상호작용을 구현하려면 컴포넌트 상단을 <GestureHandlerRootView>로 변경

// ... rest of the import statements remain same
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function Index() {
  return (
    <GestureHandlerRootView style={styles.container}>
      {/* ...rest of the code remains */}
    </GestureHandlerRootView>
  )
}

 

2,.애니메이션 컴포넌트 사용

import { ImageSourcePropType, View } from 'react-native';
import Animated from 'react-native-reanimated';

type Props = {
  imageSize: number;
  stickerSource: ImageSourcePropType;
};

export default function EmojiSticker({ imageSize, stickerSource }: Props) {
  return (
    <View style={{ top: -350 }}>
      <Animated.Image
        source={stickerSource}
        resizeMode="contain"
        style={{ width: imageSize, height: imageSize }}
      />
    </View>
  );
}

 

3. 탭 제스쳐 추가

제스처 핸들러 사용시 터치 입력 감지 동작 수행이 가능해짐.

 

* useSharedValue() : 데이터 변형, 현재 값 기반의 애니메이션 실행이 가능해짐, property 사용하여 공유 값에 접근,

수정이 가능함.

 

*  numberOfTabs : 사용자가 화면을 몇 번 탭했을 때 이벤트를 인식할지 지정함. 

- Pressable, TouchableOpacity 같은 컴포넌트에는 없음, Gesture Handler 사용해야만 가능함. 

import { TapGestureHandler } from 'react-native-gesture-handler';

<TapGestureHandler
  numberOfTaps={2}
  onActivated={() => console.log('Double tap!')}
>
  <View style={{ width: 100, height: 100, backgroundColor: 'skyblue' }} />
</TapGestureHandler>

 

 

4. Animated 스타일 적용

-  Animated 스타일은 배열에 넣어야만 정상 동작함. 

- 스타일은 뒤에 있는 값이 앞에 있는 것을 덮어씀.

<GestureDetector gesture={doubleTap}>
                <Animated.Image
                source={stickerSource}
                resizeMode = "contain"
                style={[imageStyle, {width : imageSize, height : imageSize}]} 
                />
            </GestureDetector>