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:
1which indicates that one point equals one pixel (usually PPI/DPI of 96, 76 on some platforms).2or3which indicates a Retina or high DPI display.
width
React TSX
useWindowDimensions().width;
The width in pixels of the window or screen your app occupies.