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

我使用

react-native维度
库使我的UI响应如下：

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

在my style.js文件中：

imageBackgroundLandscape:{
    width:height,
    height:width

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

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

width : 800
height: 1280

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

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

width : 800
height: 1280

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

此外，我使用react原生方向来确定屏幕的模式。
我想知道如何在旋转设备时自动更改它们的值（宽度、高度），或者是否有其他库用于此操作

提前谢谢。
事实上，你做对了，但只完成了一半任务。您从
维度
获得了
宽度
和
高度
，这是正确的，但是
如何反应本族语
了解您的方向变化

首先，您的代码应该了解方向的变化，然后设置回调函数来更改应用程序的状态，以实现新的
width
和
height

糟糕的是，我不知道
react native
是否能够理解内置函数的方向变化。所以我使用来理解方向的变化，然后我使用
setState
来重新渲染代码

当然，我将
宽度
和
高度
放在组件的
状态
内

如果要锁定方向更改，请使用。
我通常使用以下代码处理高度、宽度的混淆：

//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.js
从“react native”导入{Dimensions}；
const{height，width}=Dimensions.get（'window'）；
常数实际尺寸={
高度：（heightheight）？高度：宽度
};
导出默认的实际尺寸；

使用
actualDimensions
代替要求尺寸的高度和宽度，并且为了优雅地管理方向，您还应该尝试使用库

维度
是在JS捆绑包加载到应用程序之前加载的，因此建议为每个
渲染动态获取
高度、宽度
您可以阅读此
我通常使用Flexbox来安排我的组件布局。这有助于他们做出反应。也许你也可以试试

首先：

您面临的问题是因为您忘记调用
const{width，height}
=Dimensions.get（'window'）操作。
为了在方向更改后获取
宽度
和
高度
的最新值，您必须再次调用
维度。获取（'window'）
函数，并从其输出中获取宽度和高度

其次：

不用使用多个库，只需使用一个库（），即可轻松处理此类内容：

下面是使用时代码的外观

从'react native styleman'导入{withStyles}；
常量样式=（）=>（{
容器：{
//您可以在此处选择容器节点的常用样式。
弹性：1，
//允许编写媒体查询以根据设备的方向自动更改背景颜色
“@media”：[
{
方向：'横向'，//横向
样式：{//应用以下样式
//这些样式将在设备处于横向时应用
//模式。
背景颜色：“绿色”
//……这里有更多与景观相关的风格。。。
}
},
{
方向：'纵向'，//用于纵向
样式：{//应用下列样式
//这些样式将在设备处于纵向时应用
//模式。
背景颜色：“红色”
//…这里有更多与protrait相关的样式。。。
}
}
]
}
});
让MainComponent=（{styles}）=>(
你好，世界
);
//现在，让我们把东西连接起来。
主组件=带有样式（样式）（主组件）；
出口{
主要成分
};
我正在使用。它也在改变方向

用法

导入{
宽度百分比TODP作为wp，
高度百分比TODP作为hp，
ListenOrientation更改为lor，
将OrientationListener作为rol删除
}来自“反应本机响应屏幕”；
类登录扩展组件{
componentDidMount（）{
lor（本）；
}
组件将卸载（）{
rol（）；
}
render（）{
const styles=StyleSheet.create({
容器：{flex:1}，
文本包装器：{
高度：马力（'70%），
宽度：wp（'80%”）
},
myText:{fontSize:hp（'5%'）}
});
返回(
登录
);
}
}
导出默认登录；
您可以使用这些步骤使您的用户界面具有响应性。

  1: use percentage whenever it's possible
  2: use the power of flexbox to make your UI grow and shrink
  3: use a library lik react-native-responsive-screen

我推荐这个库：