跳到主要内容

高度和宽度

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

固定尺寸

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

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

注意

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

Flex 尺寸

在组件的样式中使用 flex 可以使组件根据可用空间动态扩展和收缩。通常,您将使用 flex: 1,这告诉组件填充所有可用空间,并在具有相同父组件的其他组件之间均匀共享。给定的 flex 值越大,组件与其兄弟组件相比将占用的空间比率越高。

信息

仅当组件的父组件的尺寸大于 0 时,组件才能扩展以填充可用空间。如果父组件既没有固定的 widthheight,也没有 flex,则父组件的尺寸将为 0,并且 flex 子组件将不可见。

在您可以控制组件的大小之后,下一步是 学习如何在屏幕上布局它

百分比尺寸

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