빠른 시작

Demo of react-native-gesture-image-viewer gestures

예제 및 데모

기본 사용법

react-native-gesture-image-viewer는 완전한 커스터마이징을 위해 제스처 동작에만 집중한 라이브러리입니다.
따라서 다음과 같이 원하는 Modal을 사용하여 뷰어를 만들 수 있습니다.

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

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />;
  }, []);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        ListComponent={ScrollView}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}