如何在 React Native 中处理响应式布局

Question

我正在使用该react-native-dimension库使我的 UI 响应如下：

const{width,height} = Dimensions.get('window');

在我的 style.js 文件中：

imageBackgroundLandscape:{
    width:height,
    height:width

},
imageBackgroundPortrait:{
    width:width,
    height:height
}

问题是，当我旋转屏幕时，宽度和高度变量已经得到以前的值！例如，在肖像模式下，我的变量是：

width : 800
height: 1280

当我旋转屏幕时，我的变量是：

width : 800 // previous value
height: 1280 // previous value

另外，我使用react-native-orientation来确定屏幕的模式。我想知道当我旋转设备时如何自动更改它们的值（宽度，高度），或者是否有其他库可以实现此目的？

提前致谢。

Answer 1

我通常height, width使用以下代码来处理混乱：

//Dimensions.js
import {Dimensions} from 'react-native';
const {height, width} = Dimensions.get('window');

const actualDimensions =  {
  height:  (height<width) ? width : height,
  width: (width>height) ? height : width
};

export default actualDimensions;

不需要从 Dimensions 中获取高度和宽度，而是使用和 来优雅地管理方向，您也actualDimensions应该尝试一下这个库。

它们Dimensions是在 JS 包加载到应用程序之前加载的，因此建议height, width为每个动态获取您可以在此处render 阅读此内容