React 网络应用程序在加载时启动并请求全屏 - 已编辑

Question

在尝试了更多小时的破解和修复之后，我决定重新措辞这个问题，但没有最终结果。我为此使用 SCREENFULL npm。

此 Web 应用程序是全屏交互式 UI，适用于员工使用的菜单系统。我希望要么让应用程序在加载时以全屏模式启动，要么检测是否全屏显示提示按钮以启用全屏并启动应用程序。两者似乎都没有完成这项工作。

我的尝试包括：

goFullScreen (){
  screenfull.request();
}
<button onClick={(e) => this.goFullScreen()}> enable full screen </button>

工作正常。全屏显示。现在检测显示应用程序（登录页面、菜单等）或仅显示全屏按钮（这样应用程序只能全屏查看）。

screenfull.on('change', () => {
    if (screenfull.isFullscreen) {
      console.log("it freaken works");
      return ( 
        <h1> hi </h1>
      )
    } else if (!screenfull.isFullscreen) {
    // display button to go fullscreen
    }
});

不会 return <h1> hi </hi> 或 return 中的任何内容，但控制台会记录。奇怪的。

更新：

我决定尝试 DidComponentMount（以及 javascript 的 "onLoad" 事件）：

componentDidMount () {
  screenfull.request();
  console.log("request happened");
}

好吧，确实发生了请求，但是没有启用全屏。在调试错误检查后，我使用包中包含的屏幕错误检测器得到了一个 webkitfullscreen 错误。

我不知道为什么这行不通，尽管如此为什么这么难。

是否有解决此问题的方法，或者我只是让它变得比应该的更难？

此网络应用程序仅运行 Android 平板电脑和 google chrome 浏览器。

Answer 1

解决方法很简单。 https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

通过清单 json 获得了我想要的确切结果。

React 网络应用程序在加载时启动并请求全屏 - 已编辑

React web app to launch and request fullscreen on load - edited

javascript

android

reactjs

fullscreen

html5-fullscreen