移動端類微信圖片瀏覽組件 react-wx-images-viewer

描述

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;

接口

Property	Description	Type	default	Remarks
maxZoomNum	圖片放大最大倍數	Number	4
zIndex	組件圖層深度	Number	100
index	初始顯示圖片序號	Number	0
gap	圖片之間的間隙	Number	10	unit is pixel
urls	圖片 URL 數組	Array		suggest the array length do not more than 10
onClose	關閉的回調處理函數	Function		須要經過該函數將組件從渲染中移除
loading	自定義圖片加載組件	component	WxImageViewer default Loading	TODO
pointer	自定義指示器組件	component	WxImageViewer default Pointer	TODO

參考

• react-modal

• react-viewer-mobile

• react-image