제스처 기능

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

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

function App() {
  return (
    <GestureViewer
      data={images}
      renderItem={renderImage}
      dismiss={{
        enabled: true,
        threshold: 80,
        resistance: 2,
        fadeBackdrop: true,
      }}
      enableHorizontalSwipe={true}
      enablePinchZoom={true}
      enableDoubleTapZoom={true}
      enablePanWhenZoomed={true}
    />
  )
}

Gesture Props

`dismiss`

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

속성	설명	타입	기본값
`enabled`	`false`일 때 dismiss 제스처가 비활성화됩니다.	`boolean`	`true`
`threshold`	`threshold`는 수직 제스처 중에 임계값을 적용하여 `onDismiss`가 호출되는 시점을 제어합니다.	`number`	`80`
`resistance`	`resistance`는 dismiss 제스처 중에 저항을 적용하여 수직 이동 범위를 제어합니다.	`number`	`2`
`fadeBackdrop`	기본적으로 아래로 스와이프하는 제스처 중에 배경 `opacity`가 1에서 0으로 점진적으로 감소합니다.	`boolean`	`true`

`enableHorizontalSwipe` (기본값: `true`)

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

`enablePinchZoom` (기본값: `true`)

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

`enableDoubleTapZoom` (기본값: `true`)

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

`enablePanWhenZoomed` (기본값: `true`)

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

#제스처 기능

#Gesture Props

#dismiss

#enableHorizontalSwipe (기본값: true)

#enablePinchZoom (기본값: true)

#enableDoubleTapZoom (기본값: true)