React-photo-viewer 是一个 React 的 npm 包，用于在网页中展示图片并提供缩放、旋转、下载等功能。本文将介绍如何使用这个包。
安装
使用 npm 进行安装：
npm install --save react-photo-viewer
引用
在需要使用 react-photo-viewer 的组件中，引入它：
import ReactPhotoViewer from 'react-photo-viewer'; import 'react-photo-viewer/dist/index.css';
第二行代码是引入了组件所需的 CSS 文件。
使用
react-photo-viewer 组件需要传入一个数组作为图片列表，每个图片都应该包含 url 和 alt 两个属性。在以下代码中，我们将一个列表赋值给变量 photos：
const photos = [
{ url: 'https://unsplash.com/photos/yOLQ2Ly7ORc', alt: 'example-1' },
{ url: 'https://unsplash.com/photos/U4i4pJb9X9I', alt: 'example-2' },
{ url: 'https://unsplash.com/photos/TzDovK2TOL0', alt: 'example-3' },
];然后在 render 方法中，使用 react-photo-viewer：
<ReactPhotoViewer photos={photos} />以上代码会在页面上展示出一个包含所有图片缩略图的相册。当用户点击图片缩略图时，会打开一个浮层，展示出大图和各种控制按钮。接下来，我们将介绍这些按钮的用途。
工具栏
浮层中有一排工具栏，包含四个按钮：下载、翻转、缩放和关闭。
下载
下载按钮用于允许用户将图片保存到本地。
翻转
翻转按钮可以将图片旋转 90 度。每次点击会顺时针旋转 90 度。
缩放
缩放按钮可以将图片的大小改变。图片有原始大小以及 50%、75%、100%、150%、200% 这几种预设大小。用户可以选择其中一个预设大小，也可以使用鼠标轮滚动缩放。
关闭
关闭按钮用于关闭浮层。
自定义工具栏
除了使用默认的工具栏，react-photo-viewer 组件还可以使用自定义工具栏。首先定义一个函数，返回一个 JSX 元素，在这个元素中定义需要的工具栏按钮：
-- -------------------- ---- -------
-------- --------------- -
------ -
-----
--------------------
--------------------
-------------------
------
--
-然后将这个函数传递给 react-photo-viewer：
<ReactPhotoViewer photos={photos} customToolbar={customToolbar} />示例代码
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------------- ---- ---------------------
------ ------------------------------------
-------- ----- -
----- -------- - ----------
- ---- ------------------------------------------ ---- ----------- --
- ---- ------------------------------------------ ---- ----------- --
- ---- ------------------------------------------ ---- ----------- --
---
------ -
----------------- --------------- --
--
-
------ ------- ----总结
在本文中，我们介绍了 npm 包 react-photo-viewer 的使用方法，包括安装、引用和各种工具栏按钮的用途。我们也展示了如何使用自定义工具栏。如果你需要在你的网页中展示图片，react-photo-viewer 可以为你提供一些很实用的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66fca