react-mobile-imgview v1.0.1

中文 | English

React移动设备图片查看器

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

提示

• 由于原作者较长时间不维护该项目，导致该项目不能兼容react最新版本^16.0.0。所以我克隆下来维护了一个最新版本，和继续解决相应的BUG。原项目地址react-imageview

特性

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

示例

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

使用方法

1、安装NPM依赖

npm install react-mobile-imgview --save

2、随意使用

// 例 1:

import React, { Component } from 'react'
import ImageView from 'react-mobile-imgview'

import 'react-mobile-imgview/dist/react-mobile-imgview.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-mobile-imgview'
import 'react-mobile-imgview/dist/react-mobile-imgview.css'

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

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

配置说明

English | 中文

react-mobile-imgview

Imageview react component for mobile preview 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-mobile-imgview --save

2、Using as your need

// Example 1:

import React, { Component } from 'react'
import ImageView from 'react-mobile-imgview'

import 'react-mobile-imgview/dist/react-mobile-imgview.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-mobile-imgview'
import 'react-mobile-imgview/dist/react-mobile-imgview.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.