React Hooks + Ant Design 实现全屏功能详解

在 React 项目中结合 Ant Design (antd) 实现全屏功能，常用于数据大屏、编辑器全屏模式等场景。本文将通过实例讲解如何利用 React Hooks 和原生 Fullscreen API 实现全屏功能，并适配 antd 组件库。

一、核心原理与实现步骤

1. Fullscreen API 基础

现代浏览器提供以下全屏接口：

element.requestFullscreen()：请求进入全屏
document.exitFullscreen()：退出全屏
document.fullscreenElement：获取当前全屏元素

2. React Hooks 状态管理

使用 useState 记录全屏状态，useEffect 监听全屏变化事件。

3. antd 组件集成

结合 antd 的 Button、Tooltip 和图标组件，实现用户友好的交互界面。

二、实战案例：全屏编辑器

场景描述

点击按钮使编辑器区域全屏，再次点击退出全屏。

完整代码

jsx 复制代码

import React, { useState, useEffect, useRef } from "react";
import { Button, Tooltip, Card, Space } from "antd";
import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import "antd/dist/antd.css";
import "./index.css"; // 引入自定义样式

const App = () => {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const fullscreenContainer = useRef(null); // 绑定全屏容器

  // 请求进入全屏
  const enterFullscreen = () => {
    if (fullscreenContainer.current) {
      fullscreenContainer.current
        .requestFullscreen()
        .then(() => setIsFullscreen(true))
        .catch((err) => console.error("全屏失败:", err));
    }
  };

  // 退出全屏
  const exitFullscreen = () => {
    document
      .exitFullscreen()
      .then(() => setIsFullscreen(false))
      .catch((err) => console.error("退出全屏失败:", err));
  };

  // 监听全屏状态变化
  useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };
    document.addEventListener("fullscreenchange", handleFullscreenChange);
    return () => {
      document.removeEventListener("fullscreenchange", handleFullscreenChange);
    };
  }, []);

  return (
    <div style={{ padding: 20 }}>
      <Space>
        <Tooltip title="全屏">
          <Button
            type="primary"
            onClick={enterFullscreen}
            disabled={isFullscreen}
            icon={<FullscreenOutlined />}
          />
        </Tooltip>
        <Tooltip title="退出全屏">
          <Button
            onClick={exitFullscreen}
            disabled={!isFullscreen}
            icon={<FullscreenExitOutlined />}
          />
        </Tooltip>
      </Space>

      {/* 全屏容器 */}
      <div
        ref={fullscreenContainer}
        className="fullscreen-container"
        style={{
          marginTop: 20,
          transition: "all 0.3s",
          height: isFullscreen ? "100vh" : "400px",
        }}
      >
        <Card title="编辑器内容区" style={{ height: "100%" }}>
          <div style={{ padding: 16 }}>
            这里是需要全屏显示的内容（如富文本编辑器）
          </div>
        </Card>
      </div>
    </div>
  );
};

export default App;

关键代码解析

状态管理：
- isFullscreen 记录当前是否全屏
- useEffect 监听 fullscreenchange 事件，自动同步状态
全屏控制逻辑：
- enterFullscreen：调用 requestFullscreen() 进入全屏
- exitFullscreen：调用 document.exitFullscreen() 退出全屏
样式适配：
- 全屏时设置容器高度为 100vh，非全屏时固定高度
- 使用 transition 实现平滑过渡

三、antd 组件适配与优化

1. 对话框全屏（进阶）

如果需要实现全屏对话框（如 Modal），可通过以下方式覆盖 antd 默认样式：

jsx 复制代码

<Modal
  title="全屏对话框"
  visible={isModalVisible}
  onOk={handleOk}
  onCancel={handleCancel}
  // 覆盖默认样式
  style={{ maxWidth: "100vw", top: 0, paddingBottom: 0 }}
  bodyStyle={{ height: "calc(100vh - 55px - 53px)", overflowY: "auto" }}
  width="100vw"
>
  <div>对话框内容</div>
</Modal>

2. 消息提示兼容

全屏模式下，antd 的 message 和 notification 可能无法正常显示。解决方案：

jsx 复制代码

// 全局配置挂载节点
Modal.info({
  title: "提示",
  content: "此消息在全屏下可见",
  getContainer: () => document.getElementById("app"), // 指定挂载节点
});

四、注意事项

浏览器限制：
- Safari 要求全屏操作必须由用户触发（如点击事件）
- 部分浏览器不支持 Fullscreen API（需做兼容性处理）
性能优化：
- 全屏时可暂停非必要动画
- 避免频繁的状态更新
安全策略：
- HTTPS 环境下才能使用部分 API
- iframe 嵌套时需配置 allow-fullscreen 属性

通过以上方法，你可以在 React + antd 项目中灵活实现全屏功能，提升用户体验。