第31章 Dimensions（尺寸）

版本：0.77

Dimensions

对 React 组件来说，useWindowDimensions 是推荐的 API。与 Dimensions 不同，它会随窗口尺寸变化自动更新，与 React 的编程范式配合得更好。

React TSX ```js import {Dimensions} from 'react-native'; ```

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

React TSX ```js const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; ```

虽然尺寸值可以立即获取，但它们可能会变化（比如设备旋转、折叠屏等），因此依赖这些值的渲染逻辑或样式应该在每次渲染时都调用这个函数获取最新值，而不是缓存结果（例如使用内联样式，而不是把值写死在 StyleSheet 里）。

如果你的应用面向折叠屏或可以改变屏幕/应用窗口大小的设备，可以使用 Dimensions 模块提供的事件监听器，如下例所示。

示例

参考

方法

addEventListener()

React TSX ```js static addEventListener( type: 'change', handler: ({ window, screen, }: DimensionsValue) => void, ): EventSubscription; ```

添加事件监听器。支持的事件：

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

get()

React TSX ```js static get(dim: 'window' | 'screen'): ScaledSize; ```

初始尺寸在 runApplication 被调用之前就已设置，因此在其他 require 执行之前就可以使用，但后续可能会更新。

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

参数：

| 名称 | 类型 | 说明 | | --- | --- | --- | | dim（必填） | string | 调用 set 时定义的尺寸名称。返回该尺寸对应的值。 |

注意：在 Android 上，window 尺寸不包含状态栏（如果状态栏不是半透明的话）和底部导航栏所占的空间。

类型定义

DimensionsValue

属性：

| 名称 | 类型 | 说明 | | --- | --- | --- | | window | ScaledSize | 应用可见窗口的大小。 | | screen | ScaledSize | 设备屏幕的大小。 |

ScaledSize

类型：object

属性：

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