温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - How to handle responsive layout in React Native
react-native responsive-design

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

发布于 2020-03-27 16:01:27

我正在使用该react-native-dimension库来使UI响应,如下所示:

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

在我的style.js文件中:

imageBackgroundLandscape:{
    width:height,
    height:width

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

问题是,当我旋转屏幕时,width和height变量具有以前的值!例如,在纵向模式下,我的变量是:

width : 800
height: 1280

当我旋转屏幕时,我的变量是:

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

另外,我使用反应本机方向来确定屏幕的模式。我想知道在旋转设备时如何自动更改它们的值(宽度,高度),或者为此还有其他库吗?

提前致谢。

查看更多

查看更多

提问者
alirezafc
被浏览
166
Suraj Malviya 2018-11-25 17:10

我通常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 你可以阅读这里