reactjs - 在 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 对象中的属性发生更改，您就可以使用该监听器。您可以阅读更多内容here .

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

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