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

目录

基本介绍

安装 

使用 

---

基本介绍

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:

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