前言
在前端开发中，展示图片是非常常见的需求。而光箱效果可以使得图片展示更加美观，用户体验更加友好。本文将介绍 npm 包 lightbox-react-with-autorotate，它是一个支持光箱效果和自动旋转的 React 组件，使用简单且功能强大。
安装
在使用 lightbox-react-with-autorotate 之前，需要先安装它。可以使用 npm 或者 yarn 进行安装：
npm install --save lightbox-react-with-autorotate # 或者 yarn add lightbox-react-with-autorotate
使用
安装完成后，在组件中引入 lightbox-react-with-autorotate，可以通过如下方式使用：
-- -------------------- ---- -------
------ -------- ---- ---------------------------------
------ ------------------------------------------------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
------- ------
----------- --
--
-
-------- -
----- - ------- ---------- - - -----------
----- ------ - -
-
---- ----------------------
------ ------ ---
-------- ----- -- ----- ---
--
-
---- ----------------------
------ ------ ---
-------- ----- -- ----- ---
--
-- ---
--
------ -
-----
----
------------------- ------ -- -
--- ------------
----
---------------
----------- --
--------------- ------- ----- ----------- ----- --
-
--
-----
---
-----
------- -- -
---------
---------------
-----------------------
----------- -- --------------- ------- ----- ---
--------------------- --
---------------
----------- ----------- - ------------- - -- - --------------
--
-
--------------------- --
---------------
----------- ----------- - -- - --------------
--
-
--
--
------
--
-
-在上面的代码中，我们创建了一个 ImageGallery 组件，它包含多张图片并支持光箱效果。我们先定义了一个包含多张图片的 images 数组，然后在组件的 render 方法中，遍历 images 数组生成多个 img 元素，单击的时候打开光箱，并将当前图片的索引保存在组件的 state 中。
当光箱打开的时候，我们创建了一个 Lightbox 组件来展示图片，同时将 images 数组、当前图片的索引、关闭光箱的回调函数、向前和向后切换图片的回调函数都传递给 Lightbox 组件。
需要注意的是，在使用 lightbox-react-with-autorotate 之前，需要先引入 CSS 文件。在上面的代码中，我们通过 import "lightbox-react-with-autorotate/dist/index.css"; 的方式引入了 CSS 文件。
参数说明
Lightbox 组件支持的参数说明如下：
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| images | Array<object> | 是 | - | 图片数组，其中每个对象包含以下属性： - src: string, 图片路径 - title?: string, 图片标题 - caption?: string, 图片描述 |
| startIndex | number | 否 | 0 | 初始展示的图片索引 |
| onClose | Function | 是 | - | 关闭光箱的回调函数 |
| onMovePrevRequest | Function | 否 | () => {} | 向前切换图片的回调函数 |
| onMoveNextRequest | Function | 否 | () => {} | 向后切换图片的回调函数 |
| spinnerColor | string | 否 | "#fff" | 加载时的圆形进度条颜色 |
| renderFooter | Function | 否 | undefined | 自定义底部内容的回调函数，函数接受当前图片的索引作为参数，返回 React 元素 |
| reactModalProps | Object | 否 | {} | 传递给 React Modal 组件的属性，详见 React Modal 官方文档，其中 isOpen、onRequestClose、shouldCloseOnOverlayClick、shouldCloseOnEsc 这些属性不需要再设置，因为已经由 Lightbox 组件处理了 |
自动旋转
除了支持光箱效果以外，lightbox-react-with-autorotate 还支持自动旋转。在 Lightbox 组件的外层再套一层 AutoRotatingCarousel 组件即可实现自动旋转的效果。下面是一个示例代码：
-- -------------------- ---- -------
------ -------- ---- ---------------------------------
------ -------------------- ---- -------------------------
------ ------------------------------------------------
------ ---------------------------------------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
------- ------
----------- --
--
-
-------- -
----- - ------- ---------- - - -----------
----- ------ - -
-
---- ----------------------
------ ------ ---
-------- ----- -- ----- ---
--
-
---- ----------------------
------ ------ ---
-------- ----- -- ----- ---
--
-- ---
--
------ -
-----
----
------------------- ------ -- -
--- ------------
----
---------------
----------- --
--------------- ------- ----- ----------- ----- --
-
--
-----
---
-----
------- -- -
---------------------
-----------
----------- -- --------------- ------- ----- ---
----------- -- --------------- --------------- ---- ---
---------- -- --------------- --------------- ----- ---
---------------
-------------------
-
------------------- ------ -- -
---------
-----------
---------------
------------------
------------------
-------------------------- -----
--
--
---
-----------------------
--
------
--
-
-在上面的代码中，我们首先引入了 auto-rotating-carousel 的 CSS 文件和组件，然后在 Lightbox 组件的外层套了一个 AutoRotatingCarousel 组件，在 AutoRotatingCarousel 组件内部使用了多个 Lightbox 组件，并将 images 数组中的每张图片都映射为一个 Lightbox 组件。
AutoRotatingCarousel 组件支持的参数说明如下：
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| open | boolean | 是 | - | 控制是否打开自动旋转组件 |
| onClose | Function | 是 | - | 关闭自动旋转组件的回调函数 |
| onStart | Function | 否 | () => {} | 开始自动旋转的回调函数 |
| onStop | Function | 否 | () => {} | 停止自动旋转的回调函数 |
| interval | number | 否 | 3000 | 每个图片停留的时间（毫秒） |
| slideDuration | number | 否 | 500 | 每个图片切换的动画时间（毫秒） |
| label | string/Object | 否 | "开始旋转" | 开始自动旋转按钮的文本，也可以传递一个对象来设置包含文本和图标的按钮，具体格式请参考 auto-rotating-carousel 官方文档 |
需要注意的是，使用 auto-rotating-carousel 组件需要引入两个 CSS 文件。在上面的代码中，我们通过 import "auto-rotating-carousel/lib/style.css"; 的方式引入了 CSS 文件。
结语
通过本文的介绍，我们可以看到，lightbox-react-with-autorotate 是一个非常好用的组件，它可以帮助我们快速实现图片展示和光箱效果，而且支持自动旋转，使用起来也非常简单。相信本文对于初学者来说有一定的帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725781e8991b448e86fe