高度和宽度
组件的高度和宽度决定了它在屏幕上的大小。
固定尺寸
设置组件尺寸的常用方法是为样式添加固定的 width 和 height。React Native 中的所有尺寸均无单位,表示与像素密度无关的像素。
以这种方式设置尺寸适用于尺寸应始终固定为某个点数而不根据屏幕大小计算的组件。
警告
点数到物理测量单位之间没有通用映射。这意味着具有固定尺寸的组件在不同设备和屏幕尺寸上可能不会有相同的物理大小。然而,在大多数使用场景下,这种差异是难以察觉的。
弹性尺寸
在组件样式中使用 flex 使组件能根据可用空间动态扩展和缩小。通常会使用 flex: 1,这告诉组件填充所有可用空间,并与具有相同父组件的其他组件共享这些空间。flex 数值越大,组件相较于兄弟组件占用的空间比例越高。
信息
只有当父组件具有大于 0 的尺寸时,子组件才能扩展以填充可用空间。如果父组件没有设置固定的 width 和 height 或 flex,则父组件尺寸为 0,flex 子组件将不可见。
掌握如何控制组件尺寸后,下一步是学习如何在屏幕上布局。
百分比尺寸
如果想占据屏幕的某一部分,但不想使用 flex 布局,也可以在组件样式中使用百分比值。类似于弹性尺寸,百分比尺寸也需要父组件有定义的尺寸。