react实现页面全屏展示

使用 Fullscreen API 实现全屏

React 中可以通过调用浏览器原生 Fullscreen API 实现全屏功能。需要获取 DOM 元素引用并调用相应方法。

import { useRef } from 'react';

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

  const enterFullscreen = () => {
    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}>
      <button onClick={enterFullscreen}>进入全屏</button>
      <button onClick={exitFullscreen}>退出全屏</button>
    </div>
  );
}

使用 react-full-screen 库

第三方库 react-full-screen 提供了更简单的全屏实现方式，封装了浏览器兼容性处理。

import React, { useState } from 'react';
import { FullScreen, useFullScreenHandle } from "react-full-screen";

function App() {
  const handle = useFullScreenHandle();
  const [isFullscreen, setIsFullscreen] = useState(false);

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

      <button onClick={handle.exit}>
        退出全屏
      </button>

      <FullScreen handle={handle} onChange={setIsFullscreen}>
        <div className="fullscreen-content">
          {isFullscreen ? "全屏模式" : "非全屏模式"}
        </div>
      </FullScreen>
    </div>
  );
}

监听全屏状态变化

通过添加事件监听器可以响应全屏状态变化，执行相应逻辑。

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

  document.addEventListener('fullscreenchange', handleFullscreenChange);
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
  document.addEventListener('msfullscreenchange', handleFullscreenChange); // IE

  return () => {
    document.removeEventListener('fullscreenchange', handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.removeEventListener('msfullscreenchange', handleFullscreenChange);
  };
}, []);

样式调整注意事项

全屏模式下某些样式可能需要特殊处理，确保内容正确显示。

/* 全屏元素样式 */
.fullscreen-content {
  width: 100%;
  height: 100%;
  background-color: white;
}

/* 隐藏浏览器默认全屏提示 */
:-webkit-full-screen {
  background-color: white;
}
:-moz-full-screen {
  background-color: white;
}
:-ms-fullscreen {
  background-color: white;
}
:fullscreen {
  background-color: white;
}

移动端兼容性考虑

移动设备上的全屏行为可能有所不同，需要额外测试和处理。

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

if (isMobile) {
  // 移动端特定处理
  document.documentElement.requestFullscreen();
}