描述

react-wx-images-viewer是一个通用型的移动端图片浏览 React 组件。主要功能仿照微信图片浏览功能开发。支持单指左右滑动切换图片，双指拖拽放大缩小图片。

通过 ReactDOM 在 body 根级创建独立的 div 进行渲染，参考 react-modal 使用 ReactDOM.unstable_renderSubtreeIntoContainer 进行渲染

示例

• demo1

基础功能

• 多图左右切换浏览，不支持循环

• 图片默认样式：水平方向与屏幕等宽，垂直方向居中或者居顶

• 支持图片缩放浏览

• 单指左右滑动切换图片，双指拖拽放到或缩小图片

扩展

• 有默认加载图片动效

• 可配置图层深度即 zIndex

• 可配置初始显示图片序号

• TODO：指示器可通过 React 组件方式自定义

• TODO：加载动效可通过 React 组件方式自定义

安装

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

使用

import WxImageViewer from 'react-wx-images-viewer';
class App extends Component {

  state = {
    imags: [
      require('./assets/2.jpg'),
      require('./assets/1.jpg'),
      require('./assets/0.jpg'),
      require('./assets/3.jpg'),
      require('./assets/4.jpg'),
    ],
    index: 0,
    isOpen: false
  };

  onClose = () =>{
    this.setState({
      isOpen: false
    })
  }

  openViewer (index){
    this.setState({
      index,
      isOpen: true
    })
  }

  render() {
    const {
      imags,
      index,
      isOpen
    } = this.state;

    return (
      <div className="app">
        <div className="img-list">
          {/*直接打开*/}
          <button onClick={this.openViewer.bind(this, 0)}>点击打开图片</button>
          {
            this.state.imags.map((item, index) => {
              return <div className="img" key={item}>
                <img src={item} alt="" onClick={this.openViewer.bind(this, index)} width="100%" height="auto" className=""/> 
              </div>
            })
          }
        </div>
        {
          isOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.imags} index={index}/> : ""
        }
      </div>
    )
  }
}

export default App;

接口

参考

• react-modal

• react-viewer-mobile

• react-image