前言
在前端开发中，经常需要使用图片浏览器。很多项目中，我们都会用到图片轮播，图片展示以及相册功能。而 @navrin/react-image-lightbox 则是一款非常好用的图片浏览器。
安装
你可以使用 npm 或者 yarn 来安装。
npm install @navrin/react-image-lightbox
yarn add @navrin/react-image-lightbox
使用
在使用之前，我们需要先导入所需模块。
import React, { useState } from 'react';
import Lightbox from '@navrin/react-image-lightbox';
import ' @navrin/react-image-lightbox/dist/style.css';接着，我们可以在组件中使用 Lightbox。
-- -------------------- ---- -------
-------- ----- -
----- -------- ---------- - ----------------
----- ------------ -------------- - ------------
----- ------ - -
----------------------------------
-----------------------------------
------------------------------------
--
------ -
-----
------- ----------- -- ------------------------------
------- -- -
---------
----------------------------
------------------ ------------ - ----
------------------ -- -----------------
--------------------- -- -
------------------------- - ------------- - -- - ---------------
--
--------------------- -- -
------------------------- - -- - ---------------
--
--
--
------
--
-在上面的代码中，我们首先在 useState 中定义了 isOpen 和 photoIndex 两个变量。然后我们配置了 images 数组里的图片信息，用于后续展示。
接着我们在页面上使用了按钮，当点击按钮时，设置 isOpen 为 true，Lightbox 就会被展示出来了。
最后，我们在 Lightbox 组件的 props 中传入了各种配置信息，包括图片链接，图片标题，以及关闭和切换图片时的回调函数。
教程
@navrin/react-image-lightbox 是一款基于 React 的图片浏览器。它是由 Robert Kiyosaki 开源的，使用了 React Portals 来实现弹出式组件。
相比其他图片浏览器，这款 Lightbox 使用简单，易于配置，并且具有很高的可定制性。当你需要在你的项目中添加相册或轮播等功能时，它都可以提供良好的用户体验。
安装
你可以使用 npm 或者 yarn 来安装。
npm install @navrin/react-image-lightbox
yarn add @navrin/react-image-lightbox
使用
使用 Lightbox 很简单。在你的组件中，你只需要定义一些状态和变量，配置图片链接和标题，以及定义一些回调函数即可。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- -------------------------------
------ - ---------------------------------------------
-------- ----- -
----- -------- ---------- - ----------------
----- ------------ -------------- - ------------
----- ------ - -
----------------------------------
-----------------------------------
------------------------------------
--
------ -
-----
------- ----------- -- ------------------------------
------- -- -
---------
----------------------------
------------------ ------------ - ----
------------------ -- -----------------
--------------------- -- -
------------------------- - ------------- - -- - ---------------
--
--------------------- -- -
------------------------- - -- - ---------------
--
--
--
------
--
-在上面的代码中，我们首先在 useState 中定义了两个状态变量 isOpen 和 photoIndex，并使用了 images 数组来存储我们所需要的图片链接信息。
然后我们在 App 组件中将 Lightbox 组件嵌入到页面中，并传入所需配置信息。其中，图片链接通过 mainSrc 来传入，可以使用数组索引 photoIndex 来动态取出每一个图片链接。同时，我们还设置了图片标题，这里我们使用了插值语法，${photoIndex + 1} 表示当前图片的索引。最后，我们通过设置 onCloseRequest、onMovePrevRequest 和 onMoveNextRequest 回调函数来控制 Lightbox 的行为。
在实际使用中，你可以将代码复制到你的项目中，并根据实际需求配置 Lightbox。
回调函数
在使用 Lightbox 的过程中，你可能需要使用一些回调函数来进行二次开发或者根据实际需求对 Lightbox 进行定制。这里我们介绍一些常用的回调函数。
onCloseRequest()
关闭 Lightbox 时触发的回调函数。
<Lightbox
// 其他配置信息
onCloseRequest={() => setIsOpen(false)}
/>onMovePrevRequest()
切换到上一张图片时触发的回调函数。
<Lightbox
// 其他配置信息
onMovePrevRequest={() => { setPhotoIndex((photoIndex + images.length - 1) % images.length); }}
/>在上面的代码中，我们通过设置 indexOfPrev等于(photoIndex + images.length - 1) % images.length 实现了循环播放。
onMoveNextRequest()
切换到下一张图片时触发的回调函数。
<Lightbox
// 其他配置信息
onMoveNextRequest={() => { setPhotoIndex((photoIndex + 1) % images.length); }}
/>onImageLoadError()
当图片加载失败时触发的回调函数，可以显示一些错误信息。
<Lightbox
// 其他配置信息
onImageLoadError={() => console.log('图片加载失败')}
/>onImageLoad()
当图片加载成功时触发的回调函数。
<Lightbox
// 其他配置信息
onImageLoad={() => console.log('图片加载成功')}
/>结论
以上就是 @navrin/react-image-lightbox 的基本使用方法和相关介绍。在实际开发中，你可以根据需求进行配置，实现相关功能。
这款 Lightbox 在使用上非常方便，同时提供了很高的可定制性，让开发者可以根据自己的需求进行深度二次开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606d81e8991b448de90e