分享react-photo-view的使用和预览图片时候的bug

71 阅读 0 评论 47 点赞

我是靠谱客的博主风中翅膀，最近开发中收集的这篇文章主要介绍分享react-photo-view的使用和预览图片时候的bug，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近使用react-photo-view实现图片预览功能遇到的bug和大家分享一下

1.引入

import { PhotoProvider, PhotoConsumer,PhotoSlider} from 'react-photo-view';
import 'react-photo-view/dist/index.css';

2.定义头部

const toolbarRender = ({ rotate, onRotate }) => {
      return (
        <>
          {introVisible}
          <svg 
            className="PhotoView-PhotoSlider__toolbarIcon"
            onClick={() => onRotate(rotate - 90)}
            width="44" 
            height="44" 
            viewBox="0 0 1024 1024" 
            version="1.1" 
            xmlns="http://www.w3.org/2000/svg">
            <path fill="#ffffff" d="M96.4 116.9l80.6 80.6c80.7-81.3 192.5-131.8 316.1-132 246.2-0.5 447.3 199.7 447.7 445.9C941.2 758.5 741 959 494 959c-131.9 0-250.4-57.1-332.2-148-37.2-41.4-7.9-107.4 47.8-107.9 18.5-0.2 36.2 7.5 48.5 21.2 58.1 64.5 142.3 105.1 235.9 105.1 176.1 0 318.8-143.5 317.3-320-1.5-176.2-145.1-316.6-321.4-314.4-86.6 1.1-164.8 36.9-221.4 94.1l79.6 79.6c11.8 11.8 3.4 31.9-13.2 31.9H83.2c-10.3 0-18.7-8.3-18.7-18.7V130.1c0-16.6 20.1-25 31.9-13.2z"  />
          </svg>
          <svg className="PhotoView-PhotoSlider__toolbarIcon" 
            onClick={() => onRotate(rotate + 90)}
            width="44" 
            height="44" 
            viewBox="0 0 1024 1024" 
            version="1.1" 
            xmlns="http://www.w3.org/2000/svg">
              <path fill="#ffffff" d="M940.8 130.1v251.8c0 10.4-8.4 18.7-18.7 18.7H670.4c-16.6 0-25-20.1-13.2-31.9l79.6-79.6c-56.6-57.2-134.8-93-221.4-94.1-176.3-2.2-319.9 138.2-321.4 314.4-1.5 176.5 141.2 320 317.3 320 93.6 0 177.8-40.6 235.9-105.1 12.3-13.7 30-21.4 48.5-21.2 55.7 0.5 85 66.5 47.8 107.9-81.8 90.9-200.3 148-332.2 148-247 0-447.2-200.5-446.8-447.6C64.9 265.2 266 65 512.2 65.5c123.6 0.2 235.4 50.7 316.1 132l80.6-80.6c11.8-11.8 31.9-3.4 31.9 13.2z"  />
          </svg>
        </>
      );
    }

3.关闭预览

 closePreview = ()=>{
    this.setState({
      previewFlag:false,
    }
  }

这里遇到一个bug图片预览关闭的时候有时会导致整个页面无法滚动，原因是图片预览的时候给body添加了overflow=hidden的属性。这个bug时好时坏我添加定时延时修改body样式overflow =auto。代码如下

 closePreview = ()=>{
    this.setState({
      previewFlag:false,
    },()=>{
        setTimeout(()=>{
            document.body.style.overflow = 'auto';
        },500)
    })
  }

4.改变图片预览下标

 setPhotoIndex = (e,v)=>{
    this.setState({
        previewPndex:v
      })
  }

这里遇到bug如果用鼠标点击左右切换箭头预览的话没有问题，但是如果使用键盘左右切换按钮切换预览的话会直接跳转的最后/最前一张图片我的解决方案如下先清空预览列表再重新赋值，实测有效。

 setPhotoIndex = (e,v)=>{
    let imageListArr = [...this.state.imageListArr];
    this.setState({
      imageListArr:[],
    },()=>{
      this.setState({
        imageListArr:imageListArr,
        previewPndex:v
      })
    })
  }

5.使用

<PhotoProvider>
                    <PhotoSlider
                      toolbarRender={toolbarRender}
                      photoClosable //图片可点击关闭
                      bannerVisible={true} //导航条
                      images={previewImages} //图片列表
                      visible={previewFlag} //显示/关闭
                      onClose={this.closePreview}
                      index={previewPndex} //下标
                      onIndexChange={this.setPhotoIndex.bind(this,pndex)}
                    />
                  </PhotoProvider>