技术指南：利用自定义 Hook 片段实现全屏图片展示

在全屏展示图片时，我们经常需要点击图片才能进入全屏状态。为了简化这一过程，我们可以利用 requestFullScreen 事件来实现全屏图片展示。

技术要点：

• 自定义 Hook 片段：自定义 Hook 是 React 中一种重用状态逻辑的机制，使组件可以共享状态逻辑，而无需将其全部包含在组件中。
• requestFullScreen 事件：requestFullScreen 事件允许网页元素（如图片）请求进入全屏模式。

步骤：

1. 创建自定义 Hook

首先，我们需要创建一个自定义 Hook 来管理全屏图片的状态。这个 Hook 将使用 useState 来存储图片是否处于全屏状态。

import { useState } from "react";

const useFullScreen = () => {
  const [isFullScreen, setIsFullScreen] = useState(false);

  const toggleFullScreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
      setIsFullScreen(true);
    } else {
      document.exitFullscreen();
      setIsFullScreen(false);
    }
  };

  return { isFullScreen, toggleFullScreen };
};

2. 使用自定义 Hook

现在，我们可以在我们的组件中使用这个自定义 Hook。我们首先导入 Hook，然后将其分配给一个变量。

import { useFullScreen } from "./useFullScreen";

const Image = () => {
  const { isFullScreen, toggleFullScreen } = useFullScreen();

  return (
    <div onClick={toggleFullScreen}>
      <img src="image.jpg" alt="Image" />
    </div>
  );
};

3. 处理全屏状态

当用户点击图片时，toggleFullScreen() 方法就会被调用。这个方法首先检查文档中是否有元素处于全屏状态。如果没有，它就会使用 requestFullscreen() 方法请求全屏模式，并将 isFullScreen 状态设置为 true。如果文档中已经有元素处于全屏状态，它就会使用 exitFullscreen() 方法退出全屏模式，并将 isFullScreen 状态设置为 false。

4. 样式调整

为了使图片在全屏模式下正确显示，我们需要在 CSS 中添加一些样式。

.fullscreen-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

5. 使用全屏图片

现在，我们就可以在我们的应用程序中使用全屏图片了。当用户点击图片时，图片就会进入全屏模式。当用户再次点击图片或按 Esc 键时，图片就会退出全屏模式。

总结

利用自定义 Hook 片段实现全屏图片展示是一个简单而有效的方法。通过使用 requestFullScreen 事件，我们可以轻松地控制图片的显示状态，并为用户提供更加沉浸式的图片浏览体验。