react 实现页面多个全屏

实现多个全屏页面的方法

在React中实现多个全屏页面可以通过以下几种方式完成，具体选择取决于项目需求和浏览器兼容性要求。

使用Fullscreen API

现代浏览器提供了Fullscreen API，允许以编程方式控制全屏显示。通过监听全屏状态变化，可以在多个组件间切换全屏。

import { useEffect, 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} style={{ height: '100vh' }}>
      <button onClick={enterFullscreen}>进入全屏</button>
      <button onClick={exitFullscreen}>退出全屏</button>
    </div>
  );
}

使用CSS全屏样式

通过CSS设置全屏样式是一种简单的方法，不需要JavaScript API。

function FullscreenPage() {
  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      backgroundColor: 'white',
      zIndex: 1000
    }}>
      全屏内容
    </div>
  );
}

使用React Router管理全屏页面

结合React Router可以在路由级别管理全屏页面，每个路由对应一个全屏组件。

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/page1" element={<FullscreenPage1 />} />
        <Route path="/page2" element={<FullscreenPage2 />} />
      </Routes>
    </Router>
  );
}

function FullscreenPage1() {
  return <div style={{ height: '100vh' }}>页面1内容</div>;
}

function FullscreenPage2() {
  return <div style={{ height: '100vh' }}>页面2内容</div>;
}

使用第三方库

一些第三方库如react-full-screen可以简化全屏功能的实现。

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

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

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

      {handle.active ? (
        <div style={{ backgroundColor: 'red', height: '100vh' }}>
          全屏内容
        </div>
      ) : (
        <div>普通内容</div>
      )}
    </div>
  );
}

多全屏页面切换策略

在多个全屏页面间切换时，可以采用状态管理来控制当前显示的全屏页面。

import { useState } from 'react';

function MultiFullscreen() {
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <div>
      {currentPage === 1 && <FullscreenPage1 />}
      {currentPage === 2 && <FullscreenPage2 />}
      <button onClick={() => setCurrentPage(1)}>显示页面1</button>
      <button onClick={() => setCurrentPage(2)}>显示页面2</button>
    </div>
  );
}

以上方法可以根据具体需求组合使用，Fullscreen API适合需要真正全屏的场景，CSS方法适合简单的全屏样式，而路由和状态管理适合复杂的多页面应用。