react-image-lightbox npm

react-image-lightbox是一个React组件，用于轻松创建图片福存器并查看多个图片。它允许用户浏览多个图像，并且可以以很多不同的方式自定义。

安装

要安装，只需运行以下命令：

npm install react-image-lightbox

然后，您可以在您的项目中使用它：

import ReactImageLightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';

基本用法

1.创建图像数组

创建一个包含图像URI和标题的数组：

const images = [
    {
        src: 'image-1.jpg',
        title: 'Image 1'
    },
    {
        src: 'image-2.jpg',
        title: 'Image 2'
    },
    {
        src: 'image-3.jpg',
        title: 'Image 3'
    }
]

2. 创建状态并设置打开图像

import React, { useState } from 'react';
import ReactImageLightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';

function MyComponent() {
  const [photoIndex, setPhotoIndex] = useState(0);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}> Open Gallery</button>
      {isOpen && (
        <ReactImageLightbox
          mainSrc={images[photoIndex].src}
          nextSrc={images[(photoIndex + 1) % images.length].src}
          prevSrc={images[(photoIndex + images.length - 1) % images.length].src}
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() =>
            setPhotoIndex((photoIndex + images.length - 1) % images.length)
          }
          onMoveNextRequest={() =>
            setPhotoIndex((photoIndex + 1) % images.length)
          }
        />
      )}
    </>
  );
}

这将创建一个按钮，“打开画廊”，并在单击按钮后显示图像轮廓。

高级用法

自定义UI

如果您想自定义用户界面，请使用react-image-lightbox上的以下属性：

| 属性名 | 描述 | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | toolbarButtons | 要显示的自定义按钮 | | reactModalProps | react-modal使用的特定属性 | | customControls | 包含要在react-image-lightbox中显示的任何用户界面的 React 组件 | | onToolbarButtonClicked | 当用户单击工具栏上的按钮时执行的函数 | | imageTitle | 当前图像的标题 | | imageCaption | 当前图像的字幕 | | closeButtonTitle | 关闭按钮的标题 |

import React, { useState } from 'react';
import ReactImageLightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';

function MyComponent() {
  const [photoIndex, setPhotoIndex] = useState(0);
  const [isOpen, setIsOpen] = useState(false);

  const customButtons = [
    <button onClick={() => alert('Custom button clicked')}>Custom button</button>,
  ]

  const customControls = (
    <div>
      <p>Custom Controls</p>
    </div>
  )

  return (
    <>
      <button onClick={() => setIsOpen(true)}> Open Gallery</button>
      {isOpen && (
        <ReactImageLightbox
          mainSrc={images[photoIndex].src}
          nextSrc={images[(photoIndex + 1) % images.length].src}
          prevSrc={images[(photoIndex + images.length - 1) % images.length].src}
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() =>
            setPhotoIndex((photoIndex + images.length - 1) % images.length)
          }
          onMoveNextRequest={() =>
            setPhotoIndex((photoIndex + 1) % images.length)
          },
          toolbarButtons={customButtons}
          customControls={customControls}
          onToolbarButtonClicked={() => alert('Toolbar button clicked')}
          imageTitle={`Image ${photoIndex+1}`}
          imageCaption='This is an example caption.'
          closeButtonTitle='Close'
        />
      )}
    </>
  );
}

这将使用自定义按钮、UI组件和标题创建自定义UI的图像查看器。

结论

在这篇文章中，我们介绍了一个很好的React组件react-image-lightbox，它可以轻松地创建图像查看器，并提供了许多自定义选项。我们看到了一些基本和高级用法，并学习了一些自定义UI的选项。如果您正在寻找一个易于使用的方法来显示图像，这是一个很好的选择。