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>
正常情况：
空间不足情况：
