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的相关属性 。

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

官方文档：

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