react-image-viewer-mobile

A ReactJS image Viewer Component for mobile 一款基于react的图片预览组件，特别适合于异步获取的富文本中的图片，点击图片即可全屏显示，并且带有轮播效果。

demo

Install

npm install react-image-viewer-mobile --save

Example

'use strict';
import React from 'react';
import NewsBox from '../NewsBox';
import ImagePreviewer from 'react-image-viewer-mobile'
// import ImagePreviewer from '../../../dist/react-image-viewer-mobile.js'
class News extends React.Component {  
  render() {    
    return (      
        <div>
          <ImagePreviewer 
            async={true}             /*图片内容是否异步*/
            imageWrapperHeight={300}  /*图片容器高度*/
            opacity={1}          /*背景透明度*/
            zIndex={1000}           /*图层层级*/
            gap={10}                 /*图片间隙*/
          >
            <NewsBox content={this.props.content}/>     /*异步获取的富文本*/ 
          </ImagePreviewer>             
        </div>      
    );
  }
}
 
export default News

//新闻内容组件 NewsBox
import React from 'react';
class NewsBox extends React.Component {  
  render() {
    return (      
        <div dangerouslySetInnerHTML={{__html: this.props.content}}>        
        </div>      
    );
  }
}

export default NewsBox

Running demo locally

The demo can be launched on local machine via webpack-dev-server. Run the following:

    webpack-dev-server --config webpack.dev.config.js --color --progress

Props

Property	Description	Type	default	Remarks
async	is images async?	Boolean	false	图片内容是否异步
zIndex	the depth of the layer	Number	1000	图层层级
gap	the gap between images	Number	10	图片间隙
opacity	the backgroup modal's opacity	Number	1	背景透明度
imageWrapperHeight	the height of image wrapper	Number	300	图片容器高度

version

v1.1.0

• fixbug 异步内容update导致的溢出
• 轮播组件更换成更加流畅的nuka-carousel

v1.1.1

• fixbug 组件componentWillUnmount时解绑报错

Reference

• react-wx-images-viewer
• nuka-carousel