ReactJS 中的屏幕方向

Question

如何在ReactJS中获取方向类型和锁定方向？屏幕方向 API 不适用于 ReactJS，或者我只是不知道如何安装和使用它。请指导我执行上述操作。谢谢。

Answer 1

从您的帖子中您的用例并不清楚。但是，纯 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
)

ps虽然上面相当可行，但它可能会在短时间内变得更加全面，因为window.screen.orientation（当前的工作草案）将使其达到标准，另一个改进可能看起来很明显（监听orientationchange事件，而不是resize），但前者并不在我看来，该应用程序的桌面版本工作得非常顺利