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();
      }
    }
  };

  return (
    <div ref={elementRef}>
      <button onClick={handleFullScreen}>进入全屏</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>

      {handle.active ? (
        <div className="full-screenable-node" style={{ background: 'black' }}>
          全屏内容
          <button onClick={handle.exit}>退出</button>
        </div>
      ) : (
        <div>普通模式内容</div>
      )}
    </div>
  );
}

全屏状态监听

可以通过事件监听全屏状态变化：

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

  document.addEventListener('fullscreenchange', handleChange);

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

样式注意事项

全屏模式下CSS需要特殊处理：

:-webkit-full-screen {
  background-color: yellow;
}

:-moz-full-screen {
  background-color: yellow;
}

:-ms-fullscreen {
  background-color: yellow;
}

:fullscreen {
  background-color: yellow;
}

移动端兼容处理

移动设备可能需要添加元标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

某些移动浏览器需要手势触发全屏，不能直接通过代码调用。