제스처 기능

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

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

function App() {
  return (
    <GestureViewer
      data={images}
      renderItem={renderImage}
      dismiss={{
        enabled: true,
        direction: 'down',
        threshold: 80,
        resistance: 2,
        fadeBackdrop: true,
      }}
      horizontalSwipe={{
        enabled: true,
        distanceThresholdRatio: 0.25,
        velocityThreshold: 800,
      }}
      enablePinchZoom={true}
      enableDoubleTapZoom={true}
      enablePanWhenZoomed={true}
    />
  );
}

Gesture Props

`dismiss`

어떤 수직 스와이프 방향에서 onDismiss를 호출할지 제어하는 제스처 옵션입니다. 기본값은 기존 동작과 동일한 아래 방향 dismiss이며, 모달 스타일 닫기 제스처에 유용합니다.

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

`horizontalSwipe`

사용자가 직접 수행하는 좌우 페이지 스와이프 제스처를 제어합니다. 비활성화해도 controller 이동과 autoplay는 계속 사용할 수 있습니다.

기본값:

enabled: true
distanceThresholdRatio: 뷰어 너비의 0.25
velocityThreshold: 초당 800 points

절대 가로 이동 거리가 width * distanceThresholdRatio보다 엄격히 클 때, 또는 절대 가로 속도가 velocityThreshold보다 엄격히 클 때 페이지가 전환됩니다. 거리와 속도는 엄격한 > OR 조건으로 동작합니다. 0과 모든 유한한 0 이상의 값은 허용되며, 1보다 큰 거리 비율도 허용됩니다. 음수와 유한하지 않은 값은 기본값으로 대체됩니다.

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

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      horizontalSwipe={{
        enabled: true,
        distanceThresholdRatio: 0.25,
        velocityThreshold: 800,
      }}
    />
  );
}

사용자/마우스 가로 제스처만 비활성화합니다.

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ enabled: false }} 
/>

거리 중심 설정을 사용합니다.

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ distanceThresholdRatio: 0.5, velocityThreshold: 100_000 }} 
/>

속도 중심 설정을 사용합니다.

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ distanceThresholdRatio: 10, velocityThreshold: 100 }} 
/>

사용자 제스처를 비활성화해도 autoplay는 계속 동작합니다.

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ enabled: false }} 
  autoPlay={true}
  autoPlayInterval={1000}
/>

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

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

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

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

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

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

#제스처 기능

#Gesture Props

#dismiss

#horizontalSwipe

#enablePinchZoom (기본값: true)

#enableDoubleTapZoom (기본값: true)