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"/>某些移动浏览器需要手势触发全屏，不能直接通过代码调用。
