当前位置：首页 > React

react 实现指定组件全屏

2026-01-27 19:11:03React

使用 React 实现组件全屏功能

原生全屏 API 方法

React 中可以通过调用浏览器的原生全屏 API 实现组件全屏。需要获取 DOM 元素的引用并使用 requestFullscreen 方法。

import { useRef } from 'react';

function FullScreenComponent() {
  const elementRef = useRef(null);

  const handleFullScreen = () => {
    if (elementRef.current) {
      if (elementRef.current.requestFullscreen) {
        elementRef.current.requestFullscreen();
      } else if (elementRef.current.webkitRequestFullscreen) { // Safari
        elementRef.current.webkitRequestFullscreen();
      } else if (elementRef.current.msRequestFullscreen) { // IE11
        elementRef.current.msRequestFullscreen();
      }
    }
  };

  const exitFullScreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) { // Safari
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE11
      document.msExitFullscreen();
    }
  };

  return (
    <div ref={elementRef} style={{ width: '100%', height: '100%' }}>
      <button onClick={handleFullScreen}>进入全屏</button>
      <button onClick={exitFullScreen}>退出全屏</button>
      {/* 其他组件内容 */}
    </div>
  );
}

使用 react-full-screen 库

第三方库 react-full-screen 提供了更简单的全屏功能实现方式，支持自定义组件全屏。

安装依赖：

npm install react-full-screen

使用示例：

import { useFullScreenHandle } from 'react-full-screen';

function App() {
  const handle = useFullScreenHandle();

  return (
    <div>
      <button onClick={handle.enter}>进入全屏</button>
      <button onClick={handle.exit}>退出全屏</button>

      <div style={{ backgroundColor: '#f0f0f0' }}>
        {handle.active ? (
          <div>当前处于全屏模式</div>
        ) : (
          <div>正常显示模式</div>
        )}
      </div>
    </div>
  );
}

样式调整注意事项

在全屏模式下，CSS 可能需要特殊处理以确保布局正确。可以使用 :fullscreen 伪类为全屏状态添加特定样式：

div:fullscreen {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

浏览器兼容性处理

不同浏览器对全屏 API 的实现有差异，需要添加前缀处理。以下代码检测当前支持的全屏 API 版本：

const getFullscreenAPI = () => {
  if (document.documentElement.requestFullscreen) {
    return {
      enter: element => element.requestFullscreen(),
      exit: () => document.exitFullscreen(),
      change: cb => document.onfullscreenchange = cb
    };
  }
  // 处理其他浏览器前缀...
};

全屏事件监听

可以监听全屏状态变化事件来执行相应操作：

react 实现指定组件全屏

useEffect(() => {
  const handleChange = () => {
    console.log('全屏状态变化:', document.fullscreenElement !== null);
  };

  document.addEventListener('fullscreenchange', handleChange);
  return () => document.removeEventListener('fullscreenchange', handleChange);
}, []);