@zcorky/react-gallery v0.0.6

中文 | English

React图片查看器

使用React打造的H5图片查看器

特性

• 各类手势快速响应
• 急速滑动翻页
• 支持双指缩放、旋转、双击放大
• 支持放大后局部拖拽、翻页
• 支持超长(纵向)拼接图查看
• 支持下载
• 图片懒加载、预加载

示例

您可以下载代码在examples文件夹中找到例子或者在线示例

使用方法

1、安装NPM依赖

npm install react-imageview --save

2、随意使用

// 例 1:

import React, { Component } from 'react'
import ImageView from 'react-imageview'

import 'react-imageview/dist/react-imageview.min.css'

class Main extends Component {
    state = {
        showViewer: false
    }
    render() {
        const imagelist = ['./1.png','./2.png','./3.png','./4.png']
        return (
            <div>
                {
                    !!this.state.showViewer && <ImageView imagelist={imagelist} close={this.close.bind(this)} />
                }
                <button onClick={e=>this.show()}>click me to show Alert</button>
            </div>
        )
    }
    show() {
        this.setState({ showViewer: true })
    }
    close() {
        this.setState({ showViewer: false})
    }
}

// 例 2（推荐使用）:

import { SingleImgView } from 'react-imageview'
import 'react-imageview/dist/react-imageview.min.css'

const imagelist = ['./1.png','./2.png','./3.png','./4.png']

// 仅创建一个ImageView实例
SingleImgView.show({ 
    imagelist, 
    close: () => { SingleImgView.hide() } 
});

配置说明

English | 中文

react-imageview

Imageview component built with react

Demo

You can download the code and find demo in folder which is named as examples or demo online

Usage with React

1、Install the package

npm install react-imageview --save

2、Using as your need

// Example 1:

import React, { Component } from 'react'
import ImageView from 'react-imageview'

import 'react-imageview/dist/react-imageview.min.css'

class Main extends Component {
    state = {
        showViewer: false
    }
    render() {
        const imagelist = ['./1.png','./2.png','./3.png','./4.png']
        return (
            <div>
                {
                    !!this.state.showViewer && <ImageView imagelist={imagelist} close={this.close.bind(this)} />
                }
                <button onClick={e=>this.show()}>click me to show Alert</button>
            </div>
        )
    }
    show() {
        this.setState({ showViewer: true })
    }
    close() {
        this.setState({ showViewer: false})
    }
}

// Example 2（Recommended）:

import { SingleImgView } from 'react-imageview'
import 'react-imageview/dist/react-imageview.min.css'

// You can call SingleImgView.show anywhere and anytime, there will be only one View DOM node be added.

const imagelist = ['./1.png','./2.png','./3.png','./4.png']
SingleImgView.show({
    imagelist, 
    close: () => { SingleImgView.hide() } 
});

Configuration

License

Copyright(c) 2016-2017 AlloyTeam. Licensed under MIT license.