跳至主内容
版本:0.81

高度和宽度

非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

组件的高度和宽度决定了它在屏幕上的显示尺寸。

固定尺寸

设置组件尺寸的通用方法是在样式中添加固定的 widthheight。React Native 中的所有尺寸都是无单位的,表示与设备密度无关的像素。

这种方式适用于那些尺寸需要始终保持固定点数(而非基于屏幕尺寸计算)的组件。

注意

点(points)到物理测量单位之间不存在通用映射关系。这意味着具有固定尺寸的组件在不同设备和屏幕尺寸上可能呈现不同的物理大小。不过,在大多数使用场景中这种差异并不明显。

弹性尺寸

在组件样式中使用 flex 可使组件根据可用空间动态伸缩。通常你会使用 flex: 1,这会让组件填满所有可用空间,并与同层级组件均分空间。flex 值越大,该组件相对于同级组件所占空间比例越高。

信息

组件要扩展并填充可用空间,其父容器必须具有大于 0 的尺寸。如果父容器既没有固定 widthheight 也没有设置 flex,父容器尺寸将为 0,导致 flex 子组件不可见。

掌握组件尺寸控制后,下一步是学习如何在屏幕上进行布局

百分比尺寸

若需填充屏幕特定区域但_不想_使用 flex 布局,_可以_在组件样式中使用百分比值。与弹性尺寸类似,百分比尺寸要求父容器具有明确定义的尺寸。