react,antd-mobile图片组件并带有预览功能

import React, { Component } from 'react';
import { Image, Space, ImageViewer } from 'antd-mobile';
import { Skeleton } from 'antd';

const fileDocDownloadPath = 'api/docrepo/download?attachmentId=';
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
   srcList: [
        'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80',
        'https://images.unsplash.com/photo-1601128533718-374ffcca299b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3128&q=80',
        'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3113&q=80',
        'https://images.unsplash.com/photo-1624993590528-4ee743c9896e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&h=1000&q=80',
      ], // 图片数据
      loadFlag: true,// 加载中
    };
  }



  handleClick = index => {
    const { srcList } = this.state;
    ImageViewer.Multi.show({ images: srcList,defaultIndex:index });
  };


  render() {
    const { srcList, loadFlag} = this.state;
    return (
      <div>
        {loadFlag ? (
            // 骨架屏
          <Skeleton.Image />
        ) : (
          <>
            <Space wrap>
              {srcList &&
                srcList.length > 0 &&
                srcList.map((el, index) => (
                  <Image
                    onClick={() => this.handleClick(index)}
                    src={el}
                    width="2rem"
                    fit="cover"
                    height="2rem"
                    style={{ borderRadius: 4 }}
                  />
                ))}
            </Space>
          </>
        )}
      </div>
    );
  }
}
export default Index;

antd-mobile文档地址