react-view的使用

react-view是根据viewJs进一步封装的插件，供react可以使用：

使用步骤：

• 安装 react-view

npm i react-view

• 导入使用：

import React from 'react';
import Viewer from 'react-viewer';
import 'react-viewer/dist/index.css';

interface Props {
  visible: boolean;
  index: number;
  closeImageViewerFunc: () => void;
  images: any[];
}

const ImageViewer = ({visible,index,closeImageViewerFunc,images}: Props) => {
  return (
    <Viewer
    visible={visible}
    activeIndex={index}
    onClose={closeImageViewerFunc}
    images={images}
    />
  )
}

• 调用该组件

伪代码：

const [visible,setVisible] = useState(false)

const showImages = (fileName: string) => {
  const images = [
    {
      src: '1',
      alt: fileName,
      key: uuid()
    },
    {
      src: '2',
      alt: fileName,
      key: uuid()
    }
  ];
  return (
    <Viewer
    visible={visible}
    activeIndex={0}
    onClose={() => setVisible(false)}
    images={images}
    />
  )
}


return (
   <Button onClick={() => setVisible(true)}>查看大图</Button>
   <div>{showImages('文件名称')}</div>
)