跳到主要内容
版本:Next

高度和宽度

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

固定尺寸

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

这种方式很适合那些尺寸应始终固定为某个点数、而不是根据屏幕大小计算的组件。

警告

点与物理测量单位之间没有通用的映射关系。这意味着,具有固定尺寸的组件在不同设备和屏幕尺寸上,物理大小可能并不相同。不过,对于大多数使用场景来说,这种差异是难以察觉的。

弹性尺寸

在组件样式中使用 flex 可以让组件根据可用空间动态扩展和收缩。通常会使用 flex: 1,它表示组件填充所有可用空间,并与同级中其他具有相同父组件的组件平均分配。flex 值越大,组件相对于其兄弟组件所占的空间比例就越高。

信息

只有当父组件的尺寸大于 0 时,组件才能扩展以填充可用空间。如果父组件没有固定的 widthheight,也没有 flex,那么父组件的尺寸将为 0,而 flex 子组件将不可见。

在你能够控制组件尺寸之后,下一步就是学习如何在屏幕上进行布局

百分比尺寸

如果你想填充屏幕的某一部分,但又_不想_使用 flex 布局,那么你_可以_在组件样式中使用百分比值。与弹性尺寸类似,百分比尺寸也要求父组件具有已定义的尺寸。