Question

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

Answer 1

我可以向您推荐这个软件包react-full-screen

Answer 2

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

安装：npm i @chiragrupani/fullscreen-react

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

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

用npm包提供的FullScreen Component包裹你想进入全屏的元素，如下图：

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

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

2 个答案: