AlloyTeam/AlloyViewer

Name: AlloyViewer

Owner: ?? AlloyTeam

Description: H5??????Imageview component built with react

Created: 2017-01-11 08:13:00.0

Updated: 2018-05-03 13:18:31.0

Pushed: 2018-03-02 11:21:46.0

Homepage: https://alloyteam.github.io/AlloyViewer/examples/

Size: 134

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

?? | English

React?????

??React???H5?????

??

• ????????
• ??????
• ??????????????
• ????????????
• ????(??)?????
• ????
• ?????????

??

????????examples??????????????

????

1???NPM??

npm install react-imageview --save

2?????

 1:

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

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

s 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??????:

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

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

????ImageView??
leImgView.show({ 
imagelist, 
close: () => { SingleImgView.hide() } 

????

| ?? | ?? | ?? | ?? | ??? | | :————- | :————- | :————- | :————- | :————- | | imagelist | array | ???????? | ? | ? | | current | number | ???????????0??? | ? | 0 | | close | function | ????????? | ? | | | gap | number | ????? | ? | 30 | | maxScale | number | ?????? | ? | 2 | | disablePinch | bool | ?????? | ? | false | | enableRotate | bool | ???? | ?(????) | false | | disableDoubleTap | bool | ?????? | ? | false | | initCallback | function | ?????? | ? | | | longTap | function | ???? | ? | | | changeIndex | function | ????? | ? | |

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

xample 1:

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

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

s 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})
}


xample 2?Recommended?:

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

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

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

Configuration

| Param | Type | Description | Required | | :————- | :————- | :————- | :————- | | imagelist | array | The list of images to view | Yes | | current | number | The current image to first view | No | | close | function | The method to close the viewer | Yes | | disablePinch | bool | Disable pinch function | No | | disableRotate | bool | Disable rotate function | No | | disableDoubleTap | bool | Disable double tap function | No | | longTap | function | Events called after the long tap | No |

License

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