弹性（Flex）宽高

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

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

理解

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

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

Others

在上图中, B视图是A视图的子视图, A视图的样式如下:

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

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