react中用react-photo-view实现点击图片，图片放大可移动拉拽的效果

1. 下载插件

yarn add react-photo-view

2. 引入插件及样式

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

3. 使用插件

 <div className="img" onClick={() => setFlag(true)}>
            <PhotoProvider>
              <PhotoSlider
                photoClosable
                bannerVisible={false}
                images={[{ src: totalInfo.url }]}
                visible={flag}
                onClose={() => setFlag(false)}
                index={photoIndex}
                onIndexChange={setPhotoIndex}
              />
            </PhotoProvider>
            
            <img
              alt=""
              src={totalInfo && totalInfo.url}
              style={{ width: `${100}%`, height: `${100}%` }}
            />
          </div>

4. 图片效果
   
   详情可前往npm查看
   https://www.npmjs.com/package/react-photo-view?activeTab=readme

最后

以上就是刻苦宝贝为你收集整理的react中用react-photo-view实现点击图片，图片放大可移动拉拽的效果的全部内容，希望文章能够帮你解决react中用react-photo-view实现点击图片，图片放大可移动拉拽的效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。