Как определить ориентацию экрана на мобильном веб-сайте при использовании реакции js и событий directionchangechange? - PullRequest
Новая
       17

Как определить ориентацию экрана на мобильном веб-сайте при использовании реакции js и событий directionchangechange?

1 голос
/ 13 апреля 2019

Я хочу обнаружить изменения ориентации экрана, используя событие orientationchange, которое поддерживается всеми основными мобильными браузерами.

Я добавляю прослушиватель событий в componentDidMount и устанавливаюсостояние изнутри обратного вызова события.

Однако я вижу, что когда событие запускается впервые в результате изменения с портретного на ландшафтное состояние, состояние не обновляется до ландшафтного.Затем, когда я меняю ориентацию с пейзажа обратно на портрет, штат говорит, что ориентация это пейзаж.После этого каждый раз, когда я меняю ориентацию, состояние всегда говорит о противоположности фактической ориентации.Я не уверен, должен ли я использовать какой-либо метод реагирования жизненного цикла или мое обнаружение не подходит.

Я протестировал код, используя инструменты разработчика Chrome Toggle device toolbar.Это мой код: 

import React from 'react';

class AppInfo extends React.Component {
  state = {
    screenOrientation: 'portrait'
  }

  isPortraitMode = () => {
    console.log(this.state);
    const { screenOrientation } = this.state;
    return screenOrientation === 'portrait';
  }

  setScreenOrientation = () => {
    if (window.matchMedia("(orientation: portrait)").matches) {
      console.log('orientation: portrait');
      this.setState({
        screenOrientation: 'portrait'
      });
    }

    if (window.matchMedia("(orientation: landscape)").matches) {
      console.log('orientation: landscape');
      this.setState({
        screenOrientation: 'landscape'
      });
    }
  }

  componentDidMount() {
    window.addEventListener('orientationchange', this.setScreenOrientation);
  }

  render() {
    console.log(`orientation: from render: isPortraitMode = ${this.isPortraitMode()}`);
    <div>
      Hello
    </div>
  }
}

export default AppInfo;

1 Ответ

0 голосов
/ 13 апреля 2019

Ваша программа работает просто отлично, вам просто нужно зарегистрировать ее так: 

this.setState({screenOrientation: 'landscape'}, console.log('orientation: landscape'))

Причина этого в том, что вызов setState не является синхронным, а setState (апдейтер, обратный вызов) является асинхронной функцией и принимает обратный вызов в качестве второго аргумента.

...