如何在 ReactJS 中创建具有放大和缩小功能的图像灯箱？

在本文中，您将学习在 React 中创建具有放大和缩小功能的图像灯箱。因此，让我们开始使用 create-react-app 命令安装 react。

创建 React 应用程序并安装所需的模块：

• 创建 React 应用程序。
  

npx create-react-app myapp

• 现在我们将使用 npm 安装一个名为react-image-lightbox的依赖项，
  

npm i react-image-lightbox

项目结构：完成这些安装后。我们的文件夹结构看起来像这样。

我们现在将处理 App.js 文件。首先在这个文件中，我们将从“react-image-lightbox”导入Lightbox组件。现在创建一个空数组。该数组将包含您希望在灯箱中显示的图像源。现在在 App函数中，我们将创建 UI 以及与 LightBox 相关的所有功能。本文中的 UI 将非常简单，您可以根据需要更改 UI。 UI 将包含一个简单的按钮。单击此按钮将触发灯箱的模式以打开。

Filename-src/App.js UI 的代码如下。

Javascript

import React, { useState } from "react";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";
import "./App.css";
 
const arrOfImages = [
  "https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png",
  "https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png",
  "https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png",
];
 
function App() {
  const [indexOfImages, setIndexOfImages] = useState(0);
  const [showModal, setShowModal] = useState(false);
 
  return (
    

      

        Image Slide Show With Zoom In/Out feature
      
      {arrOfImages.map((image, index) => (
         (setIndexOfImages(index))}
           
        />
      ))}
 
      

         setShowModal(true)}>
          Show Lightbox
        
      
 
    
  );
}
 
export default App;

输出：

现在我们将把灯箱组件添加到我们的反应应用程序中。 arrOfImages 包含我们的源图像的 URL。我们将使用 useState 钩子来改变状态，一个钩子将打开和关闭包含 Modal 的 modal。另一个钩子将更改主图像的索引，当单击按钮时，showModal 的状态更改为 true，并且 LightBox 组件被渲染。在 Lightbox 工具栏中，我们将看到用于关闭模式以及放大或缩小主图像的按钮。此外，还有两个按钮，一个用于滑动到下一个图像，另一个用于滑动到上一个图像。要在按钮上显示下一个图像，单击当前图像的索引是通过 setIndexOfImages函数更改的。当点击下一个按钮时，当前图像的索引会增加，而当按下上一个按钮时，索引会减少。

文件名-src/App.js：

Javascript

import React, { useState } from "react";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";
import "./App.css";
 
const arrOfImages = [
  "https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png",
  "https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png",
  "https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png",
];
function App() {
  const [indexOfImages, setIndexOfImages] = useState(0);
  const [showModal, setShowModal] = useState(false);
  const openModalAndSetIndex = (index) => {
    setIndexOfImages(index);
    setShowModal(true);
    return;
  };
  return (
    

      
Image Slide Show With Zoom In/Out feature
 
      {arrOfImages.map((image, index) => (
         openModalAndSetIndex(index)}
        />
      ))}
 
      

         setShowModal(true)}>
          Show Lightbox
        
      
 
      {showModal && (
         setShowModal(false)}
          onMovePrevRequest={() =>
            setIndexOfImages(
              (indexOfImages + arrOfImages.length - 1) % arrOfImages.length
            )
          }
          onMoveNextRequest={() =>
            setIndexOfImages(
              (indexOfImages + arrOfImages.length + 1) % arrOfImages.length
            )
          }
        />
      )}
    
  );
}
 
export default App;

输出：