react-images和react-photo-gallery

在开发的过程中我们经常会遇到，一组图片，点击任何一个图片，该图片放大弹出来并且可以左右切换这组图片，这组图片我们称为：

• react-photo-gallery(图片画廊)
• react-images(图片灯箱)

1.安装react-images和react-photo-gallery

npm install react-images -S
npm install react-photo-gallery -S

2.使用

//1.组件中引入这两个依赖
import Gallery from 'react-photo-gallery';
import Lightbox from 'react-images';

//2.初始化数据
constructor(props) {
    super(props);
    this.state = {
      imageBoxIsOpen: false,//打开灯箱
      currentImage: 0//默认显示第一张图片
    }
}

//3.打开灯箱，且打开当前灯箱图片
openImageBox = (event, obj) => {
    this.setState({
      currentImage: obj.index,
      imageBoxIsOpen: true,
    });
};
//4.关闭灯箱图片，且恢复初始值数据
  closeImageBox = () => {
    this.setState({
      currentImage: 0,
      imageBoxIsOpen: false,
    });
  };

//5.切换前一张图片操作
  gotoPrevious = () => {
    this.setState({
      currentImage: this.state.currentImage - 1,
    });
  };
//6.切换后一张图片操作
  gotoNext = () => {
    this.setState({
      currentImage: this.state.currentImage + 1,
    });
  };

//7.render 部分
const photos = [
{ src: '../images/photo-1.jpg' },
{ src: '../images/photo-2.jpg' }
]
<Gallery photos={photos} onClick={this.openImageBox}/>
<Lightbox
  images={photos}
  onClose={this.closeImageBox}
  onClickPrev={this.gotoPrevious}
  onClickNext={this.gotoNext}
  currentImage={this.state.currentImage}
  isOpen={this.state.imageBoxIsOpen}
/>
</div>

参考网址：
https://github.com/neptunian/react-photo-gallery
https://github.com/jossmac/react-images