第49章 React Native 教程（第49章）：高度与宽度

版本：0.77 高度与宽度

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

固定尺寸​ 为组件设置尺寸的通用方法是向 style 中添加固定的宽度和高度。在 React Native 中，所有尺寸均无单位，代表密度无关像素（dip）。

这种尺寸设置方式常用于尺寸需要固定为特定点数、而非基于屏幕大小计算的组件。

注意：点数到物理测量单位之间不存在通用的映射关系。这意味着拥有固定尺寸的组件在不同设备和屏幕尺寸下，其物理大小可能不一致。不过，这种差异在大多数使用场景中肉眼难以察觉。

弹性尺寸​ 在组件的 style 中使用 flex，可以让组件根据可用空间动态伸缩。通常使用 `flex: 1`，指示组件填满所有可用空间，并与拥有相同父级的其他组件平均分配空间。flex 值越大，该组件相对于其同级兄弟组件所占的空间比例越高。

提示：只有当父级拥有大于 0 的尺寸时，子组件才能扩展以填满可用空间。如果父级既没有固定的宽高，也没有 flex，那么父级的尺寸将为 0，弹性子组件将不可见。

学会控制组件尺寸后，下一步是学习如何将其在屏幕上进行布局。

百分比尺寸​ 若希望占据屏幕的特定比例，但不想使用 flex 布局，可以在组件的 style 中使用百分比值。与弹性尺寸类似，百分比尺寸要求父级必须拥有确定的尺寸。