Swiper Zoom View
Swiper Zoom View는 간단한 이미지 갤러리 뷰를 보여주는 UI Component이며, iOS 및 Android 모두에서 사용이 가능합니다. Swiper Zoom View를 사용하면, 이미지들을 넘겨서 확인할 수 있으며 몇 가지 간단한 줌 액션을 사용할 수 있습니다.
Swiper Zoom View is a simple React Native UI Component that shows images gallery view for iOS and Android. You can use some zoom actions of image.
Installation
아래의 명령어를 통해 swiper-zoom-view를 설치할 수 있습니다. Through the command to install swiper-zoom-view.
npm install --save swiper-zoom-viewHow to use
swiper-zoom-view를 import하고 render에서 아래와 같이 사용할 수 있습니다. Import swiper-zoom-view and you can use it as below.
import SwiperView from 'swiper-zoom-view';
...
return (
<SwiperView
initialData={[require("./image1.png"), require("./image2.png")]}
initialScrollIndex={0}
/>
);Props
아래의 모든 props를 사용하여 Swiper Zoom View를 적절하게 커스터마이징 하여 사용할 수 있습니다. You can use all of the props below and customize Swiper Zoom View.
| props | required | type | description |
|---|---|---|---|
| initialData | O | image[ ] | List of images that is showed. Type of images is string or object that contains uri field |
| initialScrollIndex | X (default is 0) |
number | Index of image that is showed first . |
| width | X (default is full width size of window) |
number | Width of swiper view component |
| height | X (default is full height size of window) |
number | Height of swiper view component |
| backgroundColor | X (default is black) |
string | Color of background |
| renderItem | X (default is (info: ListRenderItemInfo) => React.Element) |
ListRenderItem | How to render the images |
| onRefresh | X | (prevData: images[], prevIndex: number) => PromiseLike<{newIndex: number, newData: image[]}> | How to refresh the view |
Example (Demo)
License
Swiper Zoom View is released under the MIT license.