目錄

基本介紹

安裝?

使用?

---

基本介紹

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