在React-Native中更改方向后如何获取当前窗口的高度和宽度？

Question

我使用Dimensions类来获取当前窗口的宽度和高度。它的“正确”功能在首次午餐屏幕上可用，但现在可以与“更改方向”一起使用。（更改高度时不获取高度-宽度）

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

const window = Dimensions.get('window');

let aspectRatio = window.Width / window.Height;

export default class Home extends PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }>
                <Text style={{ fontSize: 22}}>Height is {aspectRatio}</Text>
            </View>
        )
    }// end of render
};

Answer 1

RN为您提供了一个事件侦听器，您可以在Dimensions对象中的属性更改时使用它。您可以在此处了解更多信息。

该事件将输出一个具有屏幕尺寸信息和窗口的对象。然后，只要发生方向，您就可以简单地更新状态。

Dimensions.addEventListener('change', (e) => {
  const { width, height } = e.window;
  this.setState({width, height});
})