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