Как я могу прослушать Dimension.get ('window'). Height внутри компонента, чтобы при повороте пользователя или изменении размера веб-сайта макет можно было перекомпоновать?

Question

Как я могу прослушивать Dimension.get('window').height внутри компонента, чтобы, когда пользователь поворачивает устройство или веб-пользователь изменяет размер окна браузера, мой макет может переформатироваться?

Я проверил существующий Ho C, но не нашел, библиотека также будет принятым ответом.

Answer 1

В React Native документы упоминается addEventListener в Dimensions API. Вам просто нужно передать ему функцию, и всякий раз, когда это срабатывает, используйте setState для обновления любых значений, которые вам нужны.

Вы можете использовать это так:

import React, { Component } from 'react';
import { Dimensions } from 'react-native';

class DimensionsWrapper extends Component {

    state = {
        landscape : Dimensions.get('window').height < Dimensions.get('window').width
    }

    componentDidMount() {
        Dimensions.addEventListener('change', this._onDimensionsChange);
    }

    componentWillUnmount() {
        Dimensions.removeEventListener('change', this._onDimensionsChange);
    }

    _onDimensionsChange(event) {
        const { width, height } = event.window; 
        const landscape = height < width;

        this.setState({ landscape }); 
    }

    ...
}