react 实现指定组件全屏
使用 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
};
}
// 处理其他浏览器前缀...
};全屏事件监听
可以监听全屏状态变化事件来执行相应操作：
useEffect(() => {
const handleChange = () => {
console.log('全屏状态变化:', document.fullscreenElement !== null);
};
document.addEventListener('fullscreenchange', handleChange);
return () => document.removeEventListener('fullscreenchange', handleChange);
}, []);
