React Native如何用flex实现动态宽度条形图与旁侧文本行内对齐

需求说明 #

需要实现的效果：将2 messages文本标签对齐到绿色背景条形图的旁侧。条形图宽度由后端返回数据动态渲染，当条形图尺寸变化时，2 messages标签需要同步调整位置，始终紧贴在条形图旁。

当前代码存在的问题：2 messages文本无法显示在绿色背景条形图的旁侧。

原有代码的问题点 #

• 最外层容器设置了flexDirection: "column"垂直排列规则，条形图和文本标签默认上下排布，无法处于同一水平线
• 条形图写死了固定宽度，且容器误用了仅多行布局生效的alignContent属性，无法实现动态宽度下的标签自动跟随

修改方案 #

直接调整flex布局规则即可实现需求，不需要手动计算元素位置：

调整后的组件代码 #

<View style={styles.container}>
  <View style={[styles.barGraph, styles.greenDeep]}>
    <View style={{ flex: 1 }}>
      <Text style={styles.textLeft}>agree</Text>
    </View>
    <View style={{ flex: 1 }}>
      <Text style={styles.textRight}>3 (60 %)</Text>
    </View>
  </View>
  <View style={styles.labelWrap}>
    <Text>2 messages</Text>
  </View>
</View>

调整后的样式代码 #

container: {
  flex: 1,
  // 改为水平行布局，让条形图和标签处于同一行
  flexDirection: "row",
  // 垂直方向居中对齐，保证标签和条形图中线对齐
  alignItems: "center",
},
textLeft: {
  fontSize: 12,
  color: 'white',
  textAlign: 'left'
},
textRight: {
  fontSize: 12,
  color: 'white',
  textAlign: 'right'
},
barGraph: {
  flexDirection: 'row',
  marginBottom: theme.SIZES.BASE,
  // 删除原有固定宽度，改用flex值控制占比，后续动态修改这个flex值即可调整条形图宽度
  flex: 6,
  padding: 10,
  borderRadius: 5
},
greenDeep: {
  backgroundColor: '#36d79a'
},
labelWrap: {
  // 标签按内容宽度展示，不会被条形图挤压变形
  flexShrink: 0,
  // 和条形图保留8px间距，避免贴得过紧
  marginLeft: 8,
  marginBottom: theme.SIZES.BASE
}

效果说明 #

后续只要根据后端返回的比例动态修改barGraph的flex值，旁侧的2 messages标签就会自动调整位置，始终紧贴在条形图右侧，不需要额外做位置计算。

内容的提问来源于stack exchange，提问作者Vic Andam