本模块用于获取设备屏幕的宽高。

对于 React 函数组件,我们更推荐使用useWindowDimensions这个 Hook API。和 Dimensions 不同,它会在屏幕尺寸变化时自动更新。

import{Dimensions}from'react-native';

你可以用下面的方法来获取设备的宽高:

const windowWidth =Dimensions.get('window').width;
const windowHeight =Dimensions.get('window').height;

注意:尽管尺寸信息立即就可用,但它可能会在将来被修改(譬如设备的方向改变),所以基于这些常量的渲染逻辑和样式应当每次 render 之后都调用此函数,而不是将对应的值保存下来。(举例来说,你可能需要使用内联的样式而不是在StyleSheet中保存相应的尺寸)。

如果你要考虑可折叠的设备,或者其他屏幕尺寸可变的设备,可以参考下面例子中所使用的事件监听函数或是useWindowDimensions:

示例​

文档

方法​

addEventListener()​

staticaddEventListener(
 type:'change',
handler:({
window,
 screen,
}:DimensionsValue)=>void,
):EmitterSubscription;

添加一个事件监听函数。目前支持的事件有:

• change:在Dimensions对象内部的属性发生变化时触发。事件处理程序的参数是一个DimensionsValue类型的对象。

get()​

staticget(dim:'window'|'screen'):ScaledSize;

初始尺寸在调用 runApplication 之前设置,因此在运行任何其他 require 之前应该可用,但可能会在之后更新。

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

参数:

对于 Android,window 尺寸将不包括 状态栏(如果不透明)和 底部导航栏 占用的大小。

类型定义​

DimensionsValue​

属性:

ScaledSize​

属性: