中文文档

Description

react-wx-images-viewer is a React common component use for images viewer in mobile device. It's function look like WeChat App previewImage. Finger drag left or right to preview each image. Two finger drag zoom in or zoom out the image.

Install

1npm install --save react-wx-images-viewer

dependence

version 0.0.1 -> React ^15.5.4

version ^1.0.0 -> React ^16.0.0

Example

• demo1

How to use

1import WxImageViewer from 'react-wx-images-viewer';
2class App extends Component {
3
4  state = {
5    imags: [
6      require('./assets/2.jpg'),
7      require('./assets/1.jpg'),
8      require('./assets/0.jpg'),
9      require('./assets/3.jpg'),
10      require('./assets/4.jpg'),
11    ],
12    index: 0,
13    isOpen: false
14  };
15
16  onClose = () =>{
17    this.setState({
18      isOpen: false
19    })
20  }
21
22  openViewer (index){
23    this.setState({
24      index,
25      isOpen: true
26    })
27  }
28
29  render() {
30    const {
31      imags,
32      index,
33      isOpen
34    } = this.state;
35
36    return (
37      <div className="app">
38        <div className="img-list">
39          {/*直接打开*/}
40          <button onClick={this.openViewer.bind(this, 0)}>点击打开图片</button>
41          {
42            this.state.imags.map((item, index) => {
43              return <div className="img" key={item}>
44                <img src={item} alt="" onClick={this.openViewer.bind(this, index)} width="100%" height="auto" className=""/> 
45              </div>
46            })
47          }
48        </div>
49        {
50          isOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.imags} index={index}/> : ""
51        }
52      </div>
53    )
54  }
55}
56
57export default App;

API：

Property	Description	Type	default	Remarks
maxZoomNum	max zoom in times	Number	4
zIndex	the depth of the layer	Number	100
index	show which image in urls array when open	Number	0
gap	the gap between images	Number	10	unit is pixel
urls	images url array	Array		suggest the array length do not more than 10
onClose	handle close function	Function		must remove WxViewer from current render and other sepcial logic
loading	DIY loading style	component	WxImageViewer default Loading	TODO
pointer	DIY pointer	component	WxImageViewer default Pointer	TODO

Reference

• react-modal
• react-viewer-mobile
• react-image