高度与宽度 · React Native 中文网

新架构实战课实操 + 基建 + 原理全维度包揽，抢先掌握 React Native 新架构精髓立即查看 >

指定宽高

最简单的给组件设定尺寸的方式就是在样式中指定固定的


     width

和


     height

。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

这样给组件设置尺寸也是一种常见的模式，比如要求在不同尺寸的屏幕上都显示成一样的大小。

弹性（Flex）宽高

在组件样式中使用 flex 可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用 flex:1 来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了 flex:1 ，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的 flex 值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间 flex 值的比）。

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的 width 和 height ，也没有设定 flex ，则父容器的尺寸为零。其子组件如果使用了 flex ，也是无法显示的。

百分比宽高

如果你想要按比例填充屏幕上某一部分，又不想使用 flex 布局，那么可以在组件的 style 中使用 百分比 。与弹性宽高相似，百分比宽高要求父容器有一个明确的尺寸。

当你熟练掌握了如何控制组件的尺寸后，下一步可以学习如何在屏幕上排列组件了。

指定宽高 ​

弹性（Flex）宽高 ​

百分比宽高 ​

指定宽高

弹性（Flex）宽高

百分比宽高