https://react-native-gesture-image-viewer.pages.dev/static/js/async/route-5795031ba0c4.09b7a9506c.js

1"use strict";(self.rspackChunkdocs=self.rspackChunkdocs||[]).push([[5166],{3842(e,s,n){n.r(s);var r=n(1058),l=n(8923);function i(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"제스처-기능",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#제스처-기능",children:"#"}),"제스처 기능"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"react-native-gesture-image-viewer"}),"는 뷰어에 필요한 다양한 제스처를 지원합니다. 제스처 동작의 기본값은 아래 예제를 참고해주세요."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",lineNumbers:!0,children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { GestureViewer } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native-gesture-image-viewer'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" App"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"GestureViewer"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"      data"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{images}"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"      renderItem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{renderImage}"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"      dismiss"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{{"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"        enabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"        direction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'down'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"        threshold"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 80"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"        resistance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"        fadeBackdrop"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"      }}"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"      enableHorizontalSwipe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"      enablePinchZoom"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"      enableDoubleTapZoom"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"      enablePanWhenZoomed"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    />"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  );"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"gesture-props",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#gesture-props",children:"#"}),"Gesture Props"]}),"\n",(0,r.jsxs)(s.h3,{id:"dismiss",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#dismiss",children:"#"}),(0,r.jsx)(s.code,{children:"dismiss"})]}),"\n",(0,r.jsxs)(s.p,{children:["어떤 수직 스와이프 방향에서 ",(0,r.jsx)(s.code,{children:"onDismiss"}),"를 호출할지 제어하는 제스처 옵션입니다. 기본값은 기존 동작과 동일한 아래 방향 dismiss이며, 모달 스타일 닫기 제스처에 유용합니다."]}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{style:{textAlign:"left"},children:"속성"}),(0,r.jsx)(s.th,{style:{textAlign:"left"},children:"설명"}),(0,r.jsx)(s.th,{style:{textAlign:"left"},children:"타입"}),(0,r.jsx)(s.th,{style:{textAlign:"center"},children:"기본값"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{style:{textAlign:"left"},children:(0,r.jsx)(s.code,{children:"enabled"})}),(0,r.jsxs)(s.td,{style:{textAlign:"left"},children:[(0,r.jsx)(s.code,{children:"false"}),"일 때 dismiss 제스처가 비활성화됩니다."]}),(0,r.jsx)(s.td,{style:{textAlign:"left"},children:(0,r.jsx)(s.code,{children:"boolean"})}),(0,r.jsx)(s.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.code,{children:"true"})})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{style:{textAlign:"left"},children:(0,r.jsx)(s.code,{children:"direction"})}),(0,r.jsx)(s.td,{style:{textAlign:"left"},children:"dismiss를 트리거할 수직 스와이프 방향을 설정합니다."}),(0,r.jsxs)(s.td,{style:{textAlign:"left"},children:[(0,r.jsx)(s.code,{children:"down"}),", ",(0,r.jsx)(s.code,{children:"up"}),", ",(0,r.jsx)(s.code,{children:"both"})]}),(0,r.jsx)(s.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.code,{children:"down"})})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{style:{textAlign:"left"},children:(0,r.jsx)(s.code,{children:"threshold"})}),(0,r.jsxs)(s.td,{style:{textAlign:"left"},children:[(0,r.jsx)(s.code,{children:"threshold"}),"는 수직 제스처 중에 임계값을 적용하여 ",(0,r.jsx)(s.code,{children:"onDismiss"}),"가 호출되는 시점을 제어합니다."]}),(0,r.jsx)(s.td,{style:{textAlign:"left"},children:(0,r.jsx)(s.code,{children:"number"})}),(0,r.jsx)(s.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.code,{children:"80"})})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{style:{textAlign:"left"},children:(0,r.jsx)(s.code,{children:"resistance"})}),(0,r.jsxs)(s.td,{style:{textAlign:"left"},children:[(0,r.jsx)(s.code,{children:"resistance"}),"는 dismiss 제스처 중에 저항을 적용하여 수직 이동 범위를 제어합니다."]}),(0,r.jsx)(s.td,{style:{textAlign:"left"},children:(0,r.jsx)(s.code,{children:"number"})}),(0,r.jsx)(s.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.code,{children:"2"})})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{style:{textAlign:"left"},children:(0,r.jsx)(s.code,{children:"fadeBackdrop"})}),(0,r.jsxs)(s.td,{style:{textAlign:"left"},children:["기본적으로 설정된 dismiss 방향으로 드래그하는 동안 배경 ",(0,r.jsx)(s.code,{children:"opacity"}),"가 1에서 0으로 점진적으로 감소합니다."]}),(0,r.jsx)(s.td,{style:{textAlign:"left"},children:(0,r.jsx)(s.code,{children:"boolean"})}),(0,r.jsx)(s.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.code,{children:"true"})})]})]})]}),"\n",(0,r.jsxs)(s.h3,{id:"enablehorizontalswipe-기본값-true",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#enablehorizontalswipe-기본값-true",children:"#"}),(0,r.jsx)(s.code,{children:"enableHorizontalSwipe"})," (기본값: ",(0,r.jsx)(s.code,{children:"true"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:["좌우 스와이프 제스처를 제어합니다. ",(0,r.jsx)(s.code,{children:"false"}),"일 때 가로 제스처가 비활성화됩니다."]}),"\n",(0,r.jsxs)(s.h3,{id:"enablepinchzoom-기본값-true",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#enablepinchzoom-기본값-true",children:"#"}),(0,r.jsx)(s.code,{children:"enablePinchZoom"})," (기본값: ",(0,r.jsx)(s.code,{children:"true"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:["두 손가락 핀치 제스처를 제어합니다. ",(0,r.jsx)(s.code,{children:"false"}),"일 때 핀치 줌 제스처가 비활성화됩니다. 핀치 줌은 두 손가락 사이의 중심점을 기준으로 확대됩니다."]}),"\n",(0,r.jsxs)(s.h3,{id:"enabledoubletapzoom-기본값-true",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#enabledoubletapzoom-기본값-true",children:"#"}),(0,r.jsx)(s.code,{children:"enableDoubleTapZoom"})," (기본값: ",(0,r.jsx)(s.code,{children:"true"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:["더블탭 줌 제스처를 제어합니다. ",(0,r.jsx)(s.code,{children:"false"}),"일 때 더블탭 줌 제스처가 비활성화됩니다. 더블탭 줌은 탭한 위치를 중심으로 확대됩니다."]}),"\n",(0,r.jsxs)(s.h3,{id:"enablepanwhenzoomed-기본값-true",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#enablepanwhenzoomed-기본값-true",children:"#"}),(0,r.jsx)(s.code,{children:"enablePanWhenZoomed"})," (기본값: ",(0,r.jsx)(s.code,{children:"true"}),")"]}

1),"\n",(0,r.jsxs)(s.p,{children:["줌이 활성화된 상태에서만 작동하며, 확대된 상태에서 아이템 위치를 이동할 수 있게 합니다. ",(0,r.jsx)(s.code,{children:"false"}),"일 때 줌 상태에서의 제스처 이동이 비활성화됩니다. 콘텐츠가 화면 밖으로 나가지 않도록 자동으로 경계를 제한합니다."]})]})}function o(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["2.x%2Fko%2Fguide%2Fusage%2Fgesture-features.mdx"]={toc:[{id:"gesture-props",text:"Gesture Props",depth:2},{id:"dismiss",text:"`dismiss`",depth:3},{id:"enablehorizontalswipe-기본값-true",text:"`enableHorizontalSwipe` (기본값: `true`)",depth:3},{id:"enablepinchzoom-기본값-true",text:"`enablePinchZoom` (기본값: `true`)",depth:3},{id:"enabledoubletapzoom-기본값-true",text:"`enableDoubleTapZoom` (기본값: `true`)",depth:3},{id:"enablepanwhenzoomed-기본값-true",text:"`enablePanWhenZoomed` (기본값: `true`)",depth:3}],title:"제스처 기능",headingTitle:"제스처 기능",frontmatter:{}},n.d(s,{default:()=>o})}}]);