弹性（Flex）宽高

最新推荐文章于 2023-09-07 22:47:23 发布

依旧风轻

最新推荐文章于 2023-09-07 22:47:23 发布

阅读量855

点赞数

分类专栏： ReactNative ReactNative恩仇录文章标签： ReactNative RN

本文链接：https://blog.csdn.net/qfeung/article/details/90175961

版权

5 篇文章 1 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

在ReactNative中, 布局Component有一个使用非常 easy 的属性 - flex, 使用方法如下:

containerStyle: {
    flex: 1,
    backgroundColor: 'lightgreen',
    justifyContent: 'flex-end',
  },

此属性并非作用于子控件或者父控件, 而是作用于自身;
一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间;
如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间, 如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）;

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

在这里插入图片描述
在上图中, B视图是A视图的子视图, A视图的样式如下:

AStyle: {
    flex: 1,
    backgroundColor: 'teal',
    justifyContent: 'flex-start',
  },

A视图的样式中, 有一条属性是默认的 - flexDirection: 'column', 这决定了非常重要且很难发现的一点, 就是: 即使你不指定B视图的高度(此时看不到B视图), B视图的宽度也是和B视图相同的(撑起), 同理, 若flexDirection: 'row', 则子视图在竖直轴(column)方向撑起.
更通俗的讲, 当B视图的高度没有指定, 且flex也没有指定, 则此时, B视图存在于A视图的顶部, 紧贴A视图顶部, 为一个高度为0, 宽度为A视图宽度的矩形.

关注