Overview
A pure JavaScript image viewer component for react-native apps with pan, pinch.etc, supporting both iOS and Android.
React Native required 0.33+
Show Cases
On IOS:
On Android:
Installation
First, install react-native-image-viewer from npm:
npm install ImageViewer --save-dev
Or in package.json:
"dependencies": {
"ImageViewer": "version"
}
Then use it:
// ES6 mudule
import ImageViewer from 'ImageViewer';
Usage
There are some code from example/src/index.js:
let imgsArr = [
'http://scimg.jb51.net/allimg/160815/103-160Q509544OC.jpg',
'http://img.sc115.com/uploads1/sc/jpgs/1508/apic22412_sc115.com.jpg',
'http://h.hiphotos.baidu.com/zhidao/pic/item/0df431adcbef7609bca7d58a2adda3cc7cd99e73.jpg',
'http://facebook.github.io/react/img/logo_og.png',
'http://scimg.jb51.net/allimg/160815/103-160Q509544OC.jpg'
];
closeViewer(){
this.setState({
shown:false,
curIndex:0
})
}
<ImageViewer shown={this.state.shown}
imageUrls={imgsArr}
onClose={this.closeViewer.bind(this)}
index={this.state.curIndex}>
</ImageViewer>
Configuration
| Opthion | Description | isRequired |
|---|---|---|
| shown | whether the ImageViewer is show | required |
| imageUrls | it's a array of images' url | required |
| onClose | hidden the ImageViewer when click on ImageViewer | required |
| index | the index of image url(in imageUrls) when open the ImageViewer | required |
| failedUrl | the url for image preview loaded failure | not required |
Feature
- pan to image toggling
- double click for image zooming
- pinch for zoom image
- animation for image showing
License
MIT
