如何使用 Reactjs 启用实现全屏模式

Question

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

Answer 1

你可以参考@chiragrupani/全屏反应包。它同时支持类组件和钩子/函数组件。此外，它还支持允许多个元素进入全屏。它的用法很简单：

安装：npm i @chiragrupani/fullscreen-react

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

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

2. 使用 npm 包提供的全屏组件包装要进入全屏的元素，如下所示：

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

对于钩子，代码类似：

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：我不是这个库的作者，但我在我的生产站点中使用它。

Answer 2

我可以向你推荐这个包反应全屏