基于React的图片预览组件

一. 需求：最近项目中遇到要进行图片预览的需求，在网上找了一大圈可用的图片预览组件，起初选择react-wx-images-viewer作为预览组件二次开发，但后来发现虽然这个组件在Git上113个star，但这个组件用起来并不给力。切换图片时有种要飞的感觉，而且支持的功能也不是特别丰富，所以果断放弃了react-wx-images-viewer。然后在网络上继续寻找，最后发现一个开源预览组件非常好用，动画效果体验较好，支持的功能比较丰富，在这里记录下二次封装过程。

二. 采用的图片预览组件：react-photo-view ，虽然现在star不多，用的人也不多，但是通过比较最终还是选择了react-photo-view。因为挺好用。

三. 二次封装代码：

import React, { FunctionComponent, HTMLAttributes, useEffect, useState } from 'react';
import { PhotoProvider, PhotoSlider } from 'react-photo-view';
import 'react-photo-view/dist/index.css';

interface IProps {
  // 查看的图片列表
  viewImageList?: any;
  // 查看图片当前索引
  viewImageIndex?: number;
  // 是否加载预览图片组件
  isImageViewer?: boolean;
  // 是否显示旋转按钮
  spinButton?: boolean;
  // 是否显示全屏显示按钮
  fullScreenButton?: boolean;
  // 当预览图片列表索引发生变化
  indexChange?: (index: number) => void;
  // 关闭图片预览
  toCloseView?: () => void;
}

const FullScreenIcon = (props: HTMLAttributes<any>) => {
  const [fullscreen, setFullscreen] = useState<boolean>(false);
  useEffect(() => {
    document.onfullscreenchange = () => {
      setFullscreen(Boolean(document.fullscreenElement));
    };
  }, []);
  return (
    <svg
      className="PhotoView-PhotoSlider__toolbarIcon"
      fill="white"
      width="44"
      height="44"
      viewBox="0 0 768 768"
      {...props}
    >
      {fullscreen ? (
        <path d="M511.5 256.5h96v63h-159v-159h63v96zM448.5 607.5v-159h159v63h-96v96h-63zM256.5 256.5v-96h63v159h-159v-63h96zM160.5 511.5v-63h159v159h-63v-96h-96z" />
      ) : (
          <path d="M448.5 160.5h159v159h-63v-96h-96v-63zM544.5 544.5v-96h63v159h-159v-63h96zM160.5 319.5v-159h159v63h-96v96h-63zM223.5 448.5v96h96v63h-159v-159h63z" />
        )}
    </svg>
  );
};

const ImageView: FunctionComponent<IProps> = (props) => {
  const { viewImageList, viewImageIndex = 0, isImageViewer = false, spinButton = true, fullScreenButton = true, indexChange = () => { }, toCloseView = () => { } } = props;
  /* react-photo-view组件传参说明 */
  /**
    * images：渲染的图片组<array>[{src: ''}, {src: ''}]
    * index：初始显示图片序号<number>
    * visible：是否显示图片预览<boolean>
    * onIndexChange：切换图片的回调处理函数<Function>
    * onClose：关闭图片预览的回调处理函数<Function>
    */
  const toggleFullScreen = () => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      const element = document.getElementById('PhotoView_Slider');
      if (element) {
        element.requestFullscreen();
      }
    }
  };
  return (
    <PhotoProvider>
      <PhotoSlider images={viewImageList} index={viewImageIndex} visible={isImageViewer}
        onIndexChange={(index: number) => { indexChange(index); }} onClose={() => { toCloseView(); }}
        toolbarRender={({ rotate, onRotate }) => {
          return (
            <>
              {
                spinButton ?
                  <svg
                    className="PhotoView-PhotoSlider__toolbarIcon"
                    onClick={() => onRotate(rotate + 90)}
                    width="44"
                    height="44"
                    fill="white"
                    viewBox="0 0 768 768"
                  >
                    <path d="M565.5 202.5l75-75v225h-225l103.5-103.5c-34.5-34.5-82.5-57-135-57-106.5 0-192 85.5-192 192s85.5 192 192 192c84 0 156-52.5 181.5-127.5h66c-28.5 111-127.5 192-247.5 192-141 0-255-115.5-255-256.5s114-256.5 255-256.5c70.5 0 135 28.5 181.5 75z" />
                  </svg> : null
              }
              {fullScreenButton && document.fullscreenEnabled && (
                <FullScreenIcon onClick={() => { toggleFullScreen(); }} />
              )}
            </>
          );
        }}
      />
    </PhotoProvider>
  );
};

export default ImageView;

四. 样式代码：

 无

五. 效果：

预览1效果图

预览2效果图

预览3效果图