跳到主要内容
Version: Next

useWindowDimensions

React TSX
import {useWindowDimensions} from 'react-native';

useWindowDimensions 会在屏幕尺寸或字体缩放比例变化时自动更新所有值。你可以像这样获取应用窗口的宽度和高度:

React TSX
const {height, width} = useWindowDimensions();

示例​

属性​

fontScale​

React TSX
useWindowDimensions().fontScale;

The scale of the font currently used. Some operating systems allow users to scale their font sizes larger or smaller for reading comfort. This property will let you know what is in effect.

note

可以将字体大小百分比用于动态调整 UI 元素(如内边距、外边距和容器高度)的尺寸,以确保一致且无障碍的用户体验。利用 fontScale 属性,开发者可以让应用更好地适配用户对更大或更小文本的偏好,从而提高可读性和易用性。


height​

React TSX
useWindowDimensions().height;

The height in pixels of the window or screen your app occupies.


scale​

React TSX
useWindowDimensions().scale;

The pixel ratio of the device your app is running on. The values can be:

  • 1 which indicates that one point equals one pixel (usually PPI/DPI of 96, 76 on some platforms).
  • 2 or 3 which indicates a Retina or high DPI display.

width​

React TSX
useWindowDimensions().width;

The width in pixels of the window or screen your app occupies.