제스처 기능

react-native-gesture-image-viewer는 뷰어에 필요한 다양한 제스처를 지원합니다. 제스처 동작의 기본값은 아래 예제를 참고해주세요.

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

function App() {
  return (
    <GestureViewer
      data={images}
      renderItem={renderImage}
      enableLoop={false}
      enableDismissGesture={true}
      enableSwipeGesture={true}
      enableZoomGesture={true}
      enableDoubleTapGesture={true}
      enableZoomPanGesture={true}
    />
  )
}

Props

enableLoop (기본값: false)

루프 모드를 활성화합니다. true일 때 마지막 아이템에서 다음으로 가면 첫 번째로, 첫 번째에서 이전으로 가면 마지막으로 돌아갑니다.

enableDismissGesture (기본값: true)

아래로 스와이프할 때 onDismiss 함수를 호출합니다. 모달을 아래로 스와이프해서 닫는 제스처에 유용합니다.

enableSwipeGesture (기본값: true)

좌우 스와이프 제스처를 제어합니다. false일 때 가로 제스처가 비활성화됩니다.

enableZoomGesture (기본값: true)

두 손가락 핀치 제스처를 제어합니다. false일 때 핀치 줌 제스처가 비활성화됩니다. 핀치 줌은 두 손가락 사이의 중심점을 기준으로 확대됩니다.

enableDoubleTapGesture (기본값: true)

더블탭 줌 제스처를 제어합니다. false일 때 더블탭 줌 제스처가 비활성화됩니다. 더블탭 줌은 탭한 위치를 중심으로 확대됩니다.

enableZoomPanGesture (기본값: true)

줌이 활성화된 상태에서만 작동하며, 확대된 상태에서 아이템 위치를 이동할 수 있게 합니다. false일 때 줌 상태에서의 제스처 이동이 비활성화됩니다. 콘텐츠가 화면 밖으로 나가지 않도록 자동으로 경계를 제한합니다.