[React Native] 라이브러리 및 속성 사용법 (react-native-image-zoom-viewer)

📚 라이브러리 명: react-native-image-zoom-viewer

---

📚 샘플코드 (from 라이브러리 자료 )

import { Modal } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
 
const images = [{
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
    props: {}
}, {
    url: '',
    props: {source: require('../background.png')}
}]
 
export default class App extends React.Component {
    render: function() {
        return (
            <Modal visible={true} transparent={true}>
                <ImageViewer imageUrls={images}/>
            </Modal>
        )
    }
}

출처: https://www.npmjs.com/package/react-native-image-zoom-viewer

react-native-image-zoom-viewer

---

📚 ImageViewer라이브러리, imagesUrls속성 사용법

import ImageViewer from 'react-native-image-zoom-viewer';

const PictureViewer = () => {
const images = [{
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
    props: {}
	}, {
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=100',
    props: {}
	}]
	return (
		<ImageViewer imageUrls={images}/>
	)
};

imageUrls속성은 배열이 들어가야한다.

배열은 url과 props 라는 키값으로 구성된 객체여야 한다.

나는 images 변수에 배열을 담았다.

---

📚 index속성 사용

index속성은 숫자를 받는다.

속성을 설정하지 않으면, 기본값은 ‘index=0(배열의 0번째)’이다.

그러면, 어떤 사진을 선택하여도 확대되는 사진은 무조건 첫번째 사진이다.

만약 10번째 사진을 보려면 페이지를 넘겨서 10까지 가야한다.

---

📚 index속성 샘플코드

<ImageViewer imageUrls={images} index={indexOf(item)} />

사진배열에서 클릭된 사진이 확대되게 구현하기위해,

클릭한 객체를 item이라는 변수에 담고, 해당 객체의 index로 변환하였다.

 

왼) 사진배열 샘플

중) (인덱스 속성 미사용) 어떤 사진을 선택하여도, 확대되는 사진은 ‘인덱스0번’ 첫번째 사진(티거)이다.

오) (인덱스 속성. 샘플코드 사용) 2번째 사진을 선택하면, 인덱스 1번 사진(푸우)이 확대된다.

 

---

개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D