跳到主要内容

Dimensions

useWindowDimensions 是 React 组件的首选 API。与 Dimensions 不同,它会随着窗口尺寸的更新而更新。这与 React 的范式很好地契合。

tsx
import {Dimensions} from 'react-native';

你可以使用以下代码获取应用窗口的宽度和高度

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

虽然尺寸立即可用,但它们可能会发生变化(例如由于设备旋转、可折叠设备等),因此任何依赖这些常量的渲染逻辑或样式都应尝试在每次渲染时调用此函数,而不是缓存值(例如,使用内联样式而不是在 StyleSheet 中设置值)。

如果你正在开发针对可折叠设备或可以改变屏幕尺寸或应用窗口尺寸的设备,你可以使用 Dimensions 模块中提供的事件监听器,如下面的示例所示。

示例

参考

方法

addEventListener()

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

添加事件处理程序。支持的事件有

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

get()

tsx
static get(dim: 'window' | 'screen'): ScaledSize;

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

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

参数

名称类型描述
dim
必需
string维度名称,与调用 set 时定义的一致。返回该维度的值。

对于 Android,window 维度将不包括 status bar(如果不是半透明的)和 bottom navigation bar 使用的大小


类型定义

DimensionsValue

属性

名称类型描述
windowScaledSize可见应用程序窗口的大小。
screenScaledSize设备屏幕的大小。

ScaledSize

类型
object

属性

名称类型
widthnumber
heightnumber
scalenumber
fontScalenumber