ReactNative - FlexGrow和FlexShrin

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

实践：

比如要实现以下布局：

正常情况下的布局：

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

示范代码如下：

 <View style={{
  height: 50,
  marginTop: 30,
  width: SCREEN_WIDTH - 100,
  flexDirection: 'row',
  alignItems: 'center',
  alignSelf: 'center',
  borderWidth: 2,
  borderColor: "#ff0000"
}}>
  <Text
    numberOfLines={1}
    style={{
      flexShrink: 1,  // 空间不足时，先被压缩
      backgroundColor: '#ff8500'
    }}>标题</Text>
  <Text
    numberOfLines={1}
    style={{
      marginLeft:10,
      backgroundColor: '#00ff00'
    }}>标签</Text>
  <Text
    numberOfLines={1}
    style={{
      flexGrow: 1,       //占据额外空间
      marginLeft:10,
      textAlign:'right',  //居右
    }}>距离</Text>
</View>

正常情况：

空间不足情况：