尺寸

信息

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 必填	string	调用 set 时定义的尺寸名称。返回该尺寸的值。

备注

在 Android 上，window 尺寸会减去状态栏（如果未设置为透明）和底部导航栏的大小。

类型定义

DimensionsValue

属性：

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

ScaledSize

类型
object

属性：

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