跳到主要内容

高度与宽度

组件的高度和宽度决定了其在屏幕上的大小。

固定尺寸

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

以这种方式设置尺寸对于那些大小应该始终固定为某个点数而不是根据屏幕尺寸计算的组件来说很常见。

注意

点与物理测量单位之间没有通用的映射。这意味着具有固定尺寸的组件在不同设备和屏幕尺寸上可能没有相同的物理尺寸。然而,对于大多数用例来说,这种差异是微不足道的。

弹性尺寸

在组件的样式中使用 flex 可以让组件根据可用空间动态地扩展和收缩。通常你会使用 flex: 1,这会告诉组件填充所有可用空间,并在具有相同父级的其他组件之间均匀分配。给定的 flex 值越大,组件相对于其同级组件所占用的空间比例就越高。

信息

组件只有在其父级尺寸大于 0 的情况下才能扩展以填充可用空间。如果父级没有固定的 widthheightflex,则父级将具有 0 的尺寸,并且 flex 子组件将不可见。

在你能控制组件大小之后,下一步就是学习如何将其布局到屏幕上

百分比尺寸

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