[RN] 이미지 zoom, swipe 모달 라이브러리 추천

⭐️ 깃헙 링크
https://github.com/ascoders/react-native-image-viewer

🙏🏻 사용방법

npm 설치

1. npm i react-native-image-zoom-viewer --save

속성

이번 프로젝트에서 쓴 속성. 두 개만 있어도 기본적인 기능은 구현이 가능하다.

onSwipeDown : 손가락으로 이미지 모달을 쓸어내리면 모달 창이 닫힘
enableSwipeDown : onSwipeDown을 가능하게 하는 속성

이미지 넣는 방법

이미지 url을 객체 형태로 배열 안에 넣어주면 Ok.

const images = [{
    // Simplest usage.
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',

    // width: number
    // height: number
    // Optional, if you know the image size, you can set the optimization performance

    // You can pass props to <Image />.
    props: {
        // headers: ...
    }
}, {
    url: '',
    props: {
        // Or you can set source directory.
        source: require('../background.png')
    }
}]

예시 코드

import { Modal } from "react-native";
import ImageViewer from "react-native-image-zoom-viewer";

const InfoImg = ({ main_img, modalVisible, setModalVisible }) => {
  // 💡 객체 형태로 이미지 추가 시 스와이프 기능 구현 가능
  const images = [
    {
     📌 url: main_img,
      props: {},
    },
  ];
  return (
    <Modal visible={modalVisible} transparent={true}>
      <ImageViewer
       📌 imageUrls={images}
       📌 enableSwipeDown={true}
       📌 onSwipeDown={() => {
          setModalVisible(false);
        }}
      />
    </Modal>
  );
};

export default InfoImg;