react-photo-view 的介绍、安装、使用。
2023-12-13 06:04:56
目录
基本介绍
react-photo-view
是一个基于 React 的图片查看器组件,用于在网页上展示和浏览图片。该组件提供了用户友好的界面和交互,可以轻松地在应用程序中集成并使用。?
- 支持触摸手势,拖动/平移/物理效果滑动,双指指定位置放大/缩小
- 全方面动画衔接,打开/关闭/回弹/触边,顺其自然的交互效果
- 图像自适应,以一个合适的最初呈现大小,并根据调整自适应
- 支持自定义如?
<video />
?或任意?HTML
?元素的预览 - 键盘导航,完美适配桌面端
- 支持自定义节点扩展,轻松实现全屏预览、旋转控制、图片介绍以及更多功能
- 基于?
typescript
,7KB 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的相关属性 。
Name | Description | Type | Default 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-startedhttps://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.https://github.com/MinJieLiu/react-photo-viewNPMJS:
文章来源:https://blog.csdn.net/qq_45799465/article/details/134884291
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!