如果你正在开发一个基于 React 的网站或应用程序，并且需要一个方便的图片查看器，那么 react-image-viewer-zoom 可能就是你需要的。
简介
react-image-viewer-zoom 是一个 React 组件，可以用于显示和放大图片。它支持以下功能：
- 可以使用鼠标或手势来缩放和拖动图片
- 可以在浏览器窗口中自动适应图片的大小
- 可以使用箭头键或手势来切换图片
- 可以使用自定义前进和后退按钮
- 支持回调函数，可以在放大、缩小、拖动或切换图片时触发
安装
使用 npm 安装 react-image-viewer-zoom，可以在项目中使用它：
npm install --save react-image-viewer-zoom
使用
要在应用程序中使用 react-image-viewer-zoom，必须先导入它，然后添加它到你的组件中。以下是一个基本示例：
-- -------------------- ---- -------
------ ----------- ---- --------------------------
-------- ----- -
----- ------ - -
- ---- ------------- ---- ------ -- --
- ---- ------------- ---- ------ -- --
- ---- ------------- ---- ------ -- --
--
------ -
-----
------------
---------------
--------------
--
------
--
-在这个例子中，我们导入 react-image-viewer-zoom 组件，然后将它添加到一个名为 App 的函数组件中。我们传递了一个包含三个图片信息的数组，以及一个初始图片的 index（imageIndex）。这些图片将显示在左侧的缩略图区域，单击其中任何一个图片将在右侧区域显示。
高级用法
除了基本使用之外，react-image-viewer-zoom 还支持许多高级选项和回调函数，可以在需要时自定义组件的行为和样式。以下是一些示例：
自定义样式
您可以使用 CSS 来自定义组件的样式。例如，您可以更改缩略图和主图像区域的大小，还可以自定义箭头按钮和放大缩小器的样式。
-- -------------------- ---- ------- -- ---------- ----- ----- ------ ---- -- ------------------------ - -------- ----- --------------- ------------ - ----------------------------------- - ------ ---- ------- ----- ------------- ----- - ----------------------------------- - ------ ---- ------- ----- ----------- ----- - ------------------------------ - ----------------- ------- -- -- ----- ------ ----- ---------- ----- ------------ ----- ------- ----- ------ ----- ------- -------- - ------------------------------------ - ----------------- ------- -- -- --- - --------------------------------------- - -------- ---- ------- ------------ - ------------------------------- - --------- --------- ---- ---- ----- ---- -------- ------ ---------- --------------- ------ -
在这个例子中，我们将 .react-image-viewer-zoom 元素设置为具有行反向（row-reverse）的 flex 布局。这意味着左边的缩略图区域将放在主图像区域的右侧。我们还改变了 .react-image-viewer-zoom-image-wrap 和 .react-image-viewer-zoom-thumbnails 元素的宽度和高度。还为箭头按钮添加了一些样式，并为 .react-image-viewer-zoom-loader 添加了一个位置属性，以便稍后添加加载器。
使用回调函数
您可以使用回调函数来在使用 React Image Viewer Zoom 时执行某些操作。例如，您可以使用 onScaleChange 这个回调函数来捕捉图像的缩放级别，并将它们打印到控制台中：
-- -------------------- ---- -------
------ ----------- ---- --------------------------
-------- ----- -
----- ------ - -
- ---- ------------- ---- ------ -- --
- ---- ------------- ---- ------ -- --
- ---- ------------- ---- ------ -- --
--
----- ----------------- - ------- -- -
--------------------- -------
-
------ -
-----
------------
---------------
--------------
---------------------------------
--
------
--
-在这个例子中，我们定义了一个名为 handleScaleChange 的函数，它接收一个参数 scale。它使用 onScaleChange prop 将该函数添加到我们的组件中。每次缩放图像时，该函数会将当前的缩放比例打印到控制台上。
支持更多的图片属性
除了 src 和 alt 属性之外，您还可以在数组中包含其他属性，例如标题和描述。这些属性将显示在图片的底部。
-- -------------------- ---- -------
------ ----------- ---- --------------------------
-------- ----- -
----- ------ - -
- ---- ------------- ---- ------ --- ------ -------- --- ------------ ----- -- - ------- -- - ---------- --
- ---- ------------- ---- ------ --- ------ -------- --- ------------ ----- -- - ------- -- - ------- --
- ---- ------------- ---- ------ --- ------ -------- --- ------------ ----- -- - ------- -- - ----------- --
--
------ -
-----
------------
---------------
--------------
--
------
--
-在这个例子中，我们添加了一个 title 和一个 description 属性，这些属性将显示在图片的底部。
总结
React Image Viewer Zoom 组件是一个方便和易于使用的 React 组件，可以帮助您显示和放大图片，支持的特性还包括自动适应浏览器大小、使用鼠标或手势缩放和拖动、自定义按钮和回调函数。希望这篇使用教程能够帮助你学会如何使用这个组件，并自定义它以满足你的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005550381e8991b448d2397