ReactJS中的屏幕方向

Question

ReactJS中的屏幕方向

6

如何在ReactJS中获取设备方向类型并锁定屏幕方向？屏幕方向API无法在ReactJS中使用，或者我不知道如何安装和使用它。请指导我如何做到上述操作。谢谢。

- ARK SRIVATSVAVA

@YevgenGorbunkov 我正在使用ReactJS创建一个应用程序，当在我的手机上查看时，我希望它以全屏横向模式显示，但我无法做到。我想要的效果如下： https://usefulangle.com/demos/105/screen.html - ARK SRIVATSVAVA

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yevhen Horbunkov · Accepted Answer

您的用例从贴子中不是非常清晰。然而，纯JavaScript (Window.matchMedia() 方法)，再加上一点CSS (针对 orientation 的媒体查询) 和窗口调整大小的事件监听器，可以让您获取窗口方向并将其存储在应用程序状态中。

以下代码演示了该概念(由于stacksnippets的限制没有现场演示，所以您可以在stackblitz上尝试一下):

import React, { useState, useEffect } from 'react'
import { render } from 'react-dom'

const rootNode = document.getElementById('root')

const App = () => {
    const isLandscape = () => window.matchMedia('(orientation:landscape)').matches,
          [orientation, setOrientation] = useState(isLandscape() ? 'landscape' : 'portrait'),
          onWindowResize = () => {              
            clearTimeout(window.resizeLag)
            window.resizeLag = setTimeout(() => {
              delete window.resizeLag                       
              setOrientation(isLandscape() ? 'landscape' : 'portrait')
            }, 200)
          }

    useEffect(() => (
      onWindowResize(),
      window.addEventListener('resize', onWindowResize),
      () => window.removeEventListener('resize', onWindowResize)
    ),[])

    return (
      <div>{orientation}</div>
    )
}

render (
  <App />,
  rootNode
)

p.s. 尽管上述内容相当可行，但随着 window.screen.orientation（目前为工作草案）被纳入标准，它可能会变得更加全面。另一个改进似乎很显然（监听 orientationchange 事件，而不是 resize），但我觉得前者在桌面应用程序版本方面并没有那么流畅。