뷰어 이벤트 처리하기

useGestureViewerEvent 훅을 사용하여 GestureViewer의 특정 이벤트를 구독할 수 있습니다. 줌, 회전, 탭과 같은 뷰어 상호작용에 반응할 수 있습니다.

useGestureViewerEvent

import { GestureViewer, useGestureViewerEvent } from 'react-native-gesture-image-viewer';

function App() {
  useGestureViewerEvent('zoomChange', (data) => {
    console.log(`줌 변경: ${data.previousScale} → ${data.scale}`);
  });

  useGestureViewerEvent('rotationChange', (data) => {
    console.log(`회전 변경: ${data.previousRotation}° → ${data.rotation}°`);
  });

  useGestureViewerEvent('tap', (data) => {
    if (data.kind === 'single') {
      console.log(`아이템 ${data.index} 탭: (${data.x}, ${data.y})`);
    }
  });

  return <GestureViewer data={images} renderItem={renderImage} />;
}

특정 인스턴스의 이벤트 구독

useGestureViewerEvent 훅의 첫 번째 인수로 인스턴스 ID를 전달하여 특정 인스턴스의 이벤트를 구독할 수 있습니다.

// 특정 인스턴스의 이벤트 구독
useGestureViewerEvent('gallery', 'zoomChange', (data) => {
  console.log(`갤러리 줌: ${data.scale}x`);
});

Note

기본 id 값은 default입니다.

API Reference

// 기본 인스턴스의 이벤트 구독
function useGestureViewerEvent<T extends GestureViewerEventType>(
  eventType: T,
  callback: GestureViewerEventCallback<T>,
): void;

// 특정 인스턴스의 이벤트 구독
function useGestureViewerEvent<T extends GestureViewerEventType>(
  instanceId: string,
  eventType: T,
  callback: GestureViewerEventCallback<T>,
): void;

이벤트 타입	설명	콜백 데이터
`zoomChange`	핀치 제스처 중 줌 스케일이 변경될 때 발생	`{ scale: number, previousScale: number }`
`rotationChange`	회전 제스처 중 회전 각도가 변경될 때 발생	`{ rotation: number, previousRotation: number }`
`tap`	뷰어에서 탭이 확정되면 발생합니다. 현재는 확정된 싱글 탭만 emit합니다.	`{ kind: 'single', x: number, y: number, index: number }`

Tip

tap 이벤트를 GestureViewer prop로 직접 처리하고 싶다면 onSingleTap을 사용할 수 있습니다.

#뷰어 이벤트 처리하기

#useGestureViewerEvent

#특정 인스턴스의 이벤트 구독

#API Reference

뷰어 이벤트 처리하기

useGestureViewerEvent

특정 인스턴스의 이벤트 구독

API Reference