Dimensions
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 模块中提供的事件监听器,如下例所示。
示例
参考
方法
addEventListener()
tsx
static addEventListener(
type: 'change',
handler: ({
window,
screen,
}: DimensionsValue) => void,
): EmitterSubscription;
添加事件处理程序。支持的事件
change
:当Dimensions
对象中的属性发生更改时触发。事件处理程序的参数是DimensionsValue
类型对象。
get()
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 |