Question

我想实现以下目标：

我想在居中值旁边显示一个标签。据我所知，flexbox无法做到这一点，对吗？我该如何实现？

此外，我想使基准对齐，但是当前此选项在Android上不起作用。因此，我在较小的文本框中使用了硬编码的填充。还有其他想法吗？

Answer 1

如果您不想使用空的View，另一种建议是将Value放置在中心，然后将unit放置在absolute（因此它离开了flex）并移至bottom，因此请确保其与Value的基本对齐。

<View style={styles.container}>
  <Text style={styles.value}>
    Value
    <Text style={styles.unit}>unit</Text>
  </Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'lightgrey',
  },
  value: {
    backgroundColor: '#eee',
    textAlign: 'center',
    fontSize: 20,
    position: 'relative',
  },
  unit: {
    fontSize: 12,
    position: 'absolute',
    bottom: 0,
  },
});

Answer 2

您可以使用3个水平放置的伸缩盒来获得类似的效果。将左侧框留空。

（已添加背景色以供参考）

<View style={styles.container}>
    <View
      style={{
        flexDirection: 'row',
      }}>
      <View style={{ flex: 1}} /> {/* blank view */}
      <View
        style={{
          flex: 1,
          justifyContent: 'flex-end',
          alignItems: 'center',
        }}>
        <Text style={{ fontSize: 30 }}>Value</Text>
      </View>
      <View
        style={{
          flex: 1,
          justifyContent: 'flex-end',
          alignItems: 'fllex-start',
        }}>
        <Text style={{ fontSize: 12 }}>Unit</Text>
      </View>
    </View>
  </View>

React-native：将视图置于居中视图旁边

2 个答案: