尺寸

信息

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 模块中的事件监听器，如以下示例所示。

示例

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

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

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

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

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

参数：

名称	类型	说明
dim 必填	string	维度名称，如调用 `set` 时定义。返回该维度的值。

备注

对于 Android，如果状态栏非透明，window 维度会减去状态栏的高度和底部导航栏的高度。

属性：

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

类型
object

属性：