Как я могу слушать об изменении ориентации на сафари? - PullRequest
Новая
       23

Как я могу слушать об изменении ориентации на сафари?

0 голосов
/ 02 февраля 2020

Я делаю приложение с expo SDK36, по какой-то причине предоставляемый ими API не работает в Safari.

Ориентация: UNKNOWN, а прослушиватель событий не получает привязки.

Вот как я пытаюсь определить ориентацию: 

import React, { cloneElement } from 'react';
import { ScreenOrientation } from 'expo';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import omit from 'lodash.omit';
import { createStructuredSelector } from 'reselect';
import { orientationChange as orientationChangeAction } from '../reducers/app/layoutReducer/actions';
import { selectDimensions, selectOrientation } from '../reducers/app/layoutReducer/selectors';

const mapStateToProps = createStructuredSelector({
  orientation: selectOrientation,
  dimensions: selectDimensions,
});

const mapDispatchToProps = (dispatch) => ({
  orientationChange: (dimensions) => dispatch(orientationChangeAction(dimensions)),
});

class ConnectedOrientationProvider extends React.Component {
  constructor(props) {
    super(props);
    this.onOrientationChange = this.onOrientationChange.bind(this);
  }

  // eslint-disable-next-line camelcase
  UNSAFE_componentWillMount() {
    this.subscription = ScreenOrientation.addOrientationChangeListener(this.onOrientationChange);
  }

  async componentDidMount() {
    await this.detectOrientation();
  }

  componentWillUnmount() {
    ScreenOrientation.removeOrientationChangeListener(this.subscription);
  }

  onOrientationChange({ orientationInfo: { orientation } }) {
    this.setOrientation(orientation);
  }

  setOrientation(orientation) {
    const { orientationChange } = this.props;
    orientationChange(orientation.split('_')[0]);
  }

  async detectOrientation() {
    let { orientation } = await ScreenOrientation.getOrientationAsync();

    /**
     * fix for safari (See https://github.com/expo/expo/issues/6949)
     * TODO: addOrientationChangeListener fix for Safari on iOS
     */
    if (orientation === ScreenOrientation.Orientation.UNKNOWN) {
      const { width, height } = this.props.dimensions;
      orientation = width > height ? ScreenOrientation.Orientation.LANDSCAPE : ScreenOrientation.Orientation.PORTRAIT;
    }
    this.setOrientation(orientation);
  }

  render() {
    const { children, ...rest } = omit(this.props, ['orientationChange', 'orientation', 'dimensions']);
    return cloneElement(children, rest);
  }
}

ConnectedOrientationProvider.propTypes = {
  orientationChange: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(ConnectedOrientationProvider);

Как я могу обнаружить, что нахожусь в сафари, и как я могу прослушать изменение ориентации на мобильном телефоне сафари ios?

...