0.0.1 • Published 4 years ago

swiper-zoom-view v0.0.1

Weekly downloads
6
License
MIT
Repository
github
Last release
4 years ago

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-view

📌 How 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.

propsrequiredtypedescription
initialDataOimage List of images that is showed. Type of images is string or object that contains uri field
initialScrollIndexX (default is 0)numberIndex of image that is showed first .
widthX (default is full width size of window)numberWidth of swiper view component
heightX (default is full height size of window)numberHeight of swiper view component
backgroundColorX (default is black)stringColor of background
renderItemX (default is (info: ListRenderItemInfo) => React.Element)ListRenderItemHow to render the images
onRefreshX(prevData: images[], prevIndex: number) => PromiseLike<{newIndex: number, newData: image[]}>How to refresh the view

📱 Example (Demo)

npm.io

📑 License

Swiper Zoom View is released under the MIT license.