ReactNative - FlexGrow和FlexShrink布局

FlexGrow

flexGrow属性定义项目的放大比例。

默认为0，即如果存在剩余空间，也不放大。它和Android中的weight很像。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

FlexShrink

flex-shrink属性定义了项目的缩小比例，默认为0，即空间不足的情况下，如果item按从左到右排序的话，最后一个item缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

image

实践：

比如要实现以下布局：

正常情况下的布局：

空间不足情况下的布局：（优先展示标签和距离）

示范代码如下：

 
  标题
  标签
  距离

正常情况：

空间不足情况：