react-大屏或网页添加全屏效果

react-大屏或网页添加全屏效果

一开始，浏览器打开是这个样子。

点击全屏按钮，实现全屏，如下图。

此效果核心代码案例如下：

import React, { useState } from 'react';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
import './index.less';

class DrivingScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFullScreen: false //全屏    //设置状态
    };
    this.formRef = React.createRef();
  }
  componentDidMount() {
    // 监听页面全屏事件
    window.onresize = () => {
      // 全屏
      if (document.fullscreenElement) {
        this.setState({ isFullScreen: true });
      }
      // 不是全屏
      else {
        this.setState({ isFullScreen: false });
      }
    };
  }
  //全屏显示函数
  fullScreen = () => {
    if (!this.state.isFullScreen) {
      this.formRef.current.requestFullscreen();
    }
  };

  // 退出全屏函数
  exitFullScreen = () => {
    document.exitFullscreen();
  };
  //在你需要全屏显示的地方添加  ref={this.formRef}
  render() {
    const { isFullScreen } = this.state;
    return (
      <div ref={this.formRef}>
          {isFullScreen === true ? (
            <FullscreenExitOutlined
              onClick={this.exitFullScreen}
            />
          ) : (
            <FullscreenOutlined
              onClick={this.fullScreen}
            />
          )}
      </div>
    );
  }
}
export default withRouter(DrivingScreen);

（以下代码是在原项目里删减下来的，请自行验证）