react-photo-view 的介绍、安装、使用。
目录
基本介绍
安装
使用
基本介绍
react-photo-view 是一个基于 React 的图片查看器组件，用于在网页上展示和浏览图片。该组件提供了用户友好的界面和交互，可以轻松地在应用程序中集成并使用。
- 支持触摸手势，拖动/平移/物理效果滑动，双指指定位置放大/缩小
- 全方面动画衔接，打开/关闭/回弹/触边，顺其自然的交互效果
- 图像自适应，以一个合适的最初呈现大小，并根据调整自适应
- 支持自定义如
<video />或任意HTML元素的预览 - 键盘导航，完美适配桌面端
- 支持自定义节点扩展，轻松实现全屏预览、旋转控制、图片介绍以及更多功能
- 基于
typescript，7KB Gzipped，支持服务端渲染 - 简单易用的
API，上手零成本
安装
在 React 项目目录运行以下命令：
pnpm:
pnpm i react-photo-viewyarn:
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-started
https://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:
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.https://www.npmjs.com/package/react-photo-view