Ориентация в ReactJS

Question

как получить тип ориентации и заблокировать ориентацию в ReactJS? API-интерфейс Screen Orientation не работает с 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), но мне кажется, что первое не работает так гладко для настольной версии приложение