reactjs - 如何使用 Reactjs 启用全屏模式？

Question

有没有办法在 React 组件函数中实现全屏 API？

Answer 1

可以引用@chiragrupani/fullscreen-react包裹。它同时支持类组件和钩子(Hook)/函数组件。同时，它支持允许多个元素进入全屏。它的用法很简单:

安装:npm i @chiragrupani/fullscreen-react

1. 添加触发全屏的按钮/图标。您还可以让它在进入和退出全屏之间切换。

<button onClick={e => this.setState({isFullScreen: true})}>Go Fullscreen</button>

1. 用npm package提供的FullScreen Component包裹你要进入全屏的元素，如下图:

    <FullScreen
        isFullScreen={this.state.isFullScreen}
        onChange={(isFullScreen) => {
            this.setState({ isFullScreen });
        }}
        >
        <div>Fullscreen</div>
    </FullScreen>

对于钩子(Hook)，代码类似:

export default function FSExampleHook() {
  let [isFullScreen, setFullScreen] = React.useState(false);

  return (
    <>
      <button onClick={(e) => setFullScreen(true)}>Go Fullscreen</button>

      <FullScreen
        isFullScreen={isFullScreen}
        onChange={(isFull: boolean) => {
          setFullScreen(isFull);
        }}
      >
        <div>Fullscreen</div>
      </FullScreen>
    </>
  );
}

PS:我不是这个库的作者，但我在我的生产站点中使用它。