react-photo-view 的介绍、安装、使用。

2023-12-13 06:04:56

目录

基本介绍

安装?

使用?


基本介绍

react-photo-view 是一个基于 React 的图片查看器组件,用于在网页上展示和浏览图片。该组件提供了用户友好的界面和交互,可以轻松地在应用程序中集成并使用。?

  • 支持触摸手势,拖动/平移/物理效果滑动,双指指定位置放大/缩小
  • 全方面动画衔接,打开/关闭/回弹/触边,顺其自然的交互效果
  • 图像自适应,以一个合适的最初呈现大小,并根据调整自适应
  • 支持自定义如?<video />?或任意?HTML?元素的预览
  • 键盘导航,完美适配桌面端
  • 支持自定义节点扩展,轻松实现全屏预览、旋转控制、图片介绍以及更多功能
  • 基于?typescript7KB Gzipped,支持服务端渲染
  • 简单易用的?API,上手零成本

安装?

在?React?项目目录运行以下命令:

pnpm:

pnpm i react-photo-view

yarn:

yarn add react-photo-view

或者用 npm:

npm install react-photo-view

使用?

//引入组件
import { PhotoProvider, PhotoView } from 'react-photo-view';

//引入css
import 'react-photo-view/dist/react-photo-view.css';

//使用

<PhotoProvider>
 <PhotoView src="/img/homepage/sourcecode/source_code_check.png">
  <img src="/img/homepage/sourcecode/source_code_check.png" />
 </PhotoView>
</PhotoProvider>

一些常用的PhotoView的相关属性 。

NameDescriptionTypeDefault Value
src图片地址string
render自定义渲染,优先级比 src 低(props: PhotoRenderParams) => React.ReactNode
overlay图片覆盖物React.ReactNode
width自定义渲染节点宽度number
height自定义渲染节点高度number
children子节点,一般为缩略图React.ReactElement
triggers触发打开图片的方式Array<"onClick" | "onDoubleClick">["onClick"]

其他的例如,添加过渡动画,自定义工具栏,长图模式等更多功能请参阅官方文档。

官方文档:

https://react-photo-view.vercel.app/docs/getting-startedicon-default.png?t=N7T8https://react-photo-view.vercel.app/docs/getting-started?Github:
GitHub - MinJieLiu/react-photo-view: An exquisite React photo preview component.An exquisite React photo preview component. Contribute to MinJieLiu/react-photo-view development by creating an account on GitHub.icon-default.png?t=N7T8https://github.com/MinJieLiu/react-photo-viewNPMJS:

react-photo-view - npmAn exquisite React photo preview component. Latest version: 1.2.3, last published: a year ago. Start using react-photo-view in your project by running `npm i react-photo-view`. There are 65 other projects in the npm registry using react-photo-view.icon-default.png?t=N7T8https://www.npmjs.com/package/react-photo-view

文章来源:https://blog.csdn.net/qq_45799465/article/details/134884291
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。