React移动端实现微信图片预览使用

描述

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

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

基础功能

• 多图左右切换浏览，不支持循环
• 图片默认样式：水平方向与屏幕等宽，垂直方向居中或者居顶
• 支持图片缩放浏览
• 单指左右滑动切换图片，双指拖拽放到或缩小图片

扩展

• 有默认加载图片动效
• 可配置图层深度即 zIndex
• 可配置初始显示图片序号
• TODO：指示器可通过 React 组件方式自定义
• TODO：加载动效可通过 React 组件方式自定义

安装

npm install --save react-wx-images-viewer
或者 
yarn add 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 (
      

        

          {/*直接打开*/}
          点击打开图片
          {
            this.state.imags.map((item, index) => {
              return 

                 
              
            })
          }
        
        {
          isOpen ?  : ""
        }
      
    )
  }
}

export default App;

接口

image.png

参考

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

原文

移动端类微信图片浏览组件 react-wx-images-viewer