尺寸

useWindowDimensions 是 React 组件更推荐使用的 API。与 Dimensions 不同，它会随着窗口尺寸的变化而更新。这与 React 的范式非常契合。

React TSX

import {Dimensions} from 'react-native';

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

React TSX

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

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

如果你的目标设备是折叠屏设备，或者屏幕尺寸或应用窗口尺寸可能发生变化的设备，你可以使用 Dimensions 模块中提供的事件监听器，如下例所示。

示例

参考

方法

addEventListener()

React TSX

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

添加事件处理器。支持的事件：

• change：当 Dimensions 对象中的某个属性发生变化时触发。传递给事件处理器的参数是一个 DimensionsValue 类型对象。

---

get()

React TSX

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

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

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

参数：

名称	类型	描述
dim Required	string	维度名称，定义方式与调用 set 时一致。返回该维度的值。

对于 Android，window 维度会排除 status bar（如果不是半透明）和 bottom navigation bar 所占用的尺寸

类型定义

DimensionsValue

属性：

名称	类型	描述
window	ScaledSize	可见应用窗口的尺寸。
screen	ScaledSize	设备屏幕的尺寸。

ScaledSize

类型
object

属性：

名称	类型
width	number
height	number
scale	number
fontScale	number