React-native：在中心视图旁边布局视图答案

【问题标题】：React-native: Layout a view next to a centered oneReact-native：在中心视图旁边布局视图
【发布时间】：2020-02-12 04:39:26
【问题描述】：

我想实现以下目标：

我想在居中值旁边显示一个标签。据我所知，这对于 flexbox 是不可能的，对吧？我怎样才能做到这一点？

此外，我希望基数对齐，但目前此选项不适用于 Android。因此，我对较小的文本框使用硬编码填充。有什么其他的想法吗？

【问题讨论】：

标签： react-native layout flexbox

【解决方案1】：

如果您不想使用空的Views，另一个建议是将Value 定位到中心，然后将unit 定位在absolute（这样它就会脱离弯曲）和到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,
  },
});

【讨论】：

【解决方案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>

【讨论】：