高度和宽度
组件的高度和宽度决定了它在屏幕上的尺寸。
固定尺寸
设置组件尺寸的常用方法是向样式添加固定的 width
和 height
。React Native 中的所有尺寸都是无单位的,表示与密度无关的像素。
这种方式设置尺寸通常适用于尺寸应始终固定为特定点数,而不是根据屏幕尺寸计算的组件。
注意
点与物理测量单位之间没有通用的映射关系。这意味着具有固定尺寸的组件在不同设备和屏幕尺寸上的物理尺寸可能不同。但是,对于大多数用例来说,这种差异是难以察觉的。
Flex 尺寸
在组件的样式中使用 flex
,使组件能够根据可用空间动态扩展和收缩。通常你会使用 flex: 1
,它指示组件填充所有可用空间,并在具有相同父级的其他组件之间平均分配。提供的 flex
值越大,组件相对于其兄弟组件所占用的空间比例就越高。
信息
只有当父级具有大于 0
的尺寸时,组件才能扩展以填充可用空间。如果父级既没有固定的 width
和 height
也没有 flex
,则父级将具有 0
尺寸,并且 flex
子级将不可见。
在控制组件尺寸后,下一步是学习如何在屏幕上布局。
百分比尺寸
如果要填充屏幕的特定部分,但又不想使用 flex
布局,则可以在组件的样式中使用百分比值。与 Flex 尺寸类似,百分比尺寸也需要具有已定义尺寸的父级。