简介
react-image-lightbox-next 是一个 React 组件，用于展示图像的浮层 zoom-in 效果，支持缩放和左右循环播放。它是轻量级且易于配置的，适用于任何 React 项目，可以快速部署和集成。
安装
使用 NPM 安装 react-image-lightbox-next：
npm install react-image-lightbox-next
在代码中引入组件：
import ImageLightbox from 'react-image-lightbox-next' import 'react-image-lightbox-next/style.css'
API
ImageLightbox 组件支持以下属性参数：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| images | Array | - | 图像 URL 数组，组件会自动根据 url 序列号为索引，若需要手动配置索引，请传入对象数组。必须传入的属性。 |
| onClose | Function | - | 关闭事件回调，通常是设置开关状态以隐藏组件。 |
| index | Number | 0 | 图像起始序列号，默认为 0。 |
| enableZoom | Boolean | true | 是否启动缩放功能，默认为 true。 |
| zoomInLabel | String | '放大' | 缩放放大按钮的标签。 |
| zoomOutLabel | String | '缩小' | 缩放缩小按钮的标签。 |
| closeLabel | String | '关闭' | 关闭按钮标签。 |
| nextLabel | String | '下一张' | 下一张按钮标签。 |
| prevLabel | String | '上一张' | 上一张按钮标签。 |
| loadFunc | Function | - | 加载图片的方法，可以是入参为 url 的 Promise 函数，或是返回 Promise 对象的方法。 |
| level | Number | 1 | 初始缩放级别。 |
| onZoomChange | Function | - | 缩放改变事件回调，返回当前 zoom 值和图片的实际宽和高。 |
| loadingLabel | String | '加载中...' | 图片加载提示标签。 |
其中，可以根据项目的实际需求在不同环境下灵活调整配置参数。
示例
下面是一个简单的示例展示了如何通过组件加载一组图片，并在点击图片时启动浮层展示，同时支持缩放和左右切换的基本功能。
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ ------------- ---- ---------------------------
------ -------------------------------------
----- ------ - -
- ---- ---------------------------------------- ------ ----- -- --
- ---- ---------------------------------------- ------ ----- -- --
- ---- ---------------------------------------- ------ ----- -- -
-
------ ------- -------- -------------- -
----- -------------- ---------------- - ---------------
----- -------------- ---------------- - -----------
----- ------------------- - ------- -- -
---------------------
----------------------
-
------ -
---- --------------------
----------------- ------ -- -
------ -
----
-----------
-------------
---------------
----------- -- ---------------------------
--
-
---
------------- -- -
--------------
---------------
--------------------
----------- -- -----------------------
--
--
------
-
-总结
使用 react-image-lightbox-next 可以方便地为 React 项目添加导航、缩放和 left/right 循环切换功能的图片浮层组件。这个组件的 API 简单明了，易于使用和扩展，可以快速集成到你的 React 项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e06c6