我如何在组件内监听 Dimension.get('window').height 以便当用户旋转或 web 用户调整大小时，布局可以重排？

Question

如何在组件内监听 Dimension.get('window').height，以便当用户旋转设备或网络用户调整浏览器大小时 window 我的布局可以重排？

我已经检查了现有的 HoC，但还没有找到，一个 lib 也是一个可以接受的答案。

Answer 1

React Native docs 在 Dimensions API 上提到了 addEventListener。你只需要给它传递一个函数，每当它被触发时，使用 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 }); 
    }

    ...
}

我如何在组件内监听 Dimension.get('window').height 以便当用户旋转或 web 用户调整大小时，布局可以重排？

How can I listen on Dimension.get('window').height within a component so when user rotate or web user resize, the layout can reflow?

javascript

reactjs

react-native

expo

react-native-web