Dimensions

useWindowDimensions 是 React 组件的首选 API。与 Dimensions 不同，它会在窗口尺寸更新时进行更新。这与 React 的范式完美契合。

import {Dimensions} from 'react-native';

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

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

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

如果您要定位折叠设备或可以更改屏幕尺寸或应用程序窗口尺寸的设备，则可以使用 Dimensions 模块中提供的事件侦听器，如下例所示。

示例

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

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

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

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

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

参数

名称	类型	描述
dim 必需	字符串	调用 `set` 时定义的维度名称。返回该维度的值。

对于 Android，window 尺寸将排除 状态栏（如果非半透明）和 底部导航栏 使用的尺寸。

属性

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

类型
对象

属性