콘텐츠 크기

GestureViewer는 렌더된 콘텐츠의 원본 크기를 알 때 더 정확한 줌과 팬 범위를 계산할 수 있습니다.

이 값은 특히 contain 이미지에서 중요합니다. 콘텐츠 크기를 제공하지 않으면 기존 동작처럼 전체 뷰어 셀을 콘텐츠 크기로 사용합니다.

원본 크기를 화면에 맞춘 뒤, 콘텐츠가 화면보다 작은 축에서는 중앙에 유지하고 큰 축에서는 콘텐츠 가장자리까지만 이동할 수 있습니다.

상황	사용할 API
`data`에 원본 크기가 이미 있음	`getItemDimensions`
로드 후 원본 크기를 알 수 있음	`setItemDimensions`
리렌더링 사이에 아이템 객체가 다시 생성될 수 있음	`setItemDimensions`와 `getItemKey`
크기를 제공하지 않음	뷰어 셀 크기를 사용

width와 height는 모두 0보다 큰 유한한 숫자여야 합니다.

`getItemDimensions`

각 아이템에 원본 width와 height 값이 이미 있다면 getItemDimensions를 사용하세요.

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

const images = [
  { uri: 'https://picsum.photos/400/200', width: 400, height: 200 },
  { uri: 'https://picsum.photos/200/400', width: 200, height: 400 },
];

function renderImage(image: (typeof images)[number]) {
  return (
    <Image
      source={{ uri: image.uri }}
      style={{ width: '100%', height: '100%' }}
      contentFit="contain"
    />
  );
}

function getImageDimensions(image: (typeof images)[number]) {
  return { width: image.width, height: image.height };
}

function App() {
  return (
    <GestureViewer
      data={images}
      renderItem={renderImage}
      getItemDimensions={getImageDimensions}
      ListComponent={ScrollView}
    />
  );
}

크기를 아직 모르면 undefined를 반환해도 됩니다.

`setItemDimensions`

이미지 컴포넌트가 로드 이후 원본 크기를 제공한다면 세 번째 renderItem 인자의 setItemDimensions를 사용하세요.

이미지 로드 또는 이벤트 콜백에서 호출하거나, 커밋 이후의 일반 useEffect에서 호출하세요. 렌더링 중이나 하위 컴포넌트의 useLayoutEffect에서는 호출하지 마세요.

setItemDimensions로 런타임에 등록한 크기는 getItemDimensions보다 우선합니다.

React Native Image

import { Image } from 'react-native';
import type { GestureViewerRenderItemInfo } from 'react-native-gesture-image-viewer';

function renderImage(
  image: { uri: string },
  _index: number,
  { setItemDimensions }: GestureViewerRenderItemInfo,
) {
  return (
    <Image
      source={{ uri: image.uri }}
      style={{ width: '100%', height: '100%' }}
      resizeMode="contain"
      onLoad={({ nativeEvent }) => {
        setItemDimensions({
          width: nativeEvent.source.width,
          height: nativeEvent.source.height,
        });
      }}
    />
  );
}

Expo Image

import { Image } from 'expo-image';
import type { GestureViewerRenderItemInfo } from 'react-native-gesture-image-viewer';

function renderImage(
  image: { uri: string },
  _index: number,
  { setItemDimensions }: GestureViewerRenderItemInfo,
) {
  return (
    <Image
      source={{ uri: image.uri }}
      style={{ width: '100%', height: '100%' }}
      contentFit="contain"
      onLoad={({ source }) => {
        setItemDimensions({
          width: source.width,
          height: source.height,
        });
      }}
    />
  );
}

FastImage

import FastImage from 'react-native-fast-image';
import type { GestureViewerRenderItemInfo } from 'react-native-gesture-image-viewer';

function renderImage(
  image: { uri: string },
  _index: number,
  { setItemDimensions }: GestureViewerRenderItemInfo,
) {
  return (
    <FastImage
      source={{ uri: image.uri }}
      style={{ width: '100%', height: '100%' }}
      resizeMode={FastImage.resizeMode.contain}
      onLoad={({ nativeEvent }) => {
        setItemDimensions({
          width: nativeEvent.width,
          height: nativeEvent.height,
        });
      }}
    />
  );
}

`getItemKey`

setItemDimensions를 사용할 때 같은 논리 아이템이 같은 슬롯에서 다른 객체로 다시 만들어질 수 있다면 getItemKey를 함께 사용하세요.

<GestureViewer
  data={images}
  renderItem={renderImage}
  getItemKey={(image) => image.uri}
  ListComponent={ScrollView}
/>

키는 렌더링되는 콘텐츠를 식별해야 합니다. 이미지 소스나 원본 크기가 바뀌면 키도 함께 바뀌어야 합니다. 배열 인덱스만 그대로 반환하지 마세요.

런타임에 등록한 크기는 같은 슬롯의 동일한 아이템에만 유지됩니다. 아이템이 다른 인덱스로 이동하면 해당 슬롯에서 크기를 다시 제공해야 합니다.

크기를 제공하지 않은 경우

getItemDimensions와 setItemDimensions 모두 유효한 크기를 제공하지 않으면 뷰어는 전체 뷰어 셀을 콘텐츠 크기로 사용합니다. 기존 동작과 호환되지만, contain 콘텐츠는 실제 보이는 가장자리보다 더 멀리 이동할 수 있습니다.

#콘텐츠 크기

#getItemDimensions

#setItemDimensions

#React Native Image

#Expo Image

#FastImage

#getItemKey

#크기를 제공하지 않은 경우