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

最新推荐文章于 2025-03-28 14:38:20 发布

大聪明码农徐

最新推荐文章于 2025-03-28 14:38:20 发布

阅读量2.8k

点赞数 21

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/qq_45799465/article/details/134884291

版权

文章介绍了React-photo-view，一个轻量级的React组件，用于在网页上提供流畅的图片浏览体验。它支持多点触控、自适应布局、定制预览和API使用。详述了安装步骤和关键属性，适合React项目集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本介绍

安装

使用

基本介绍

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"]