如何在React Native中模拟“align-items：baseline”？

Question

由于RN的Flexbox实现中没有“align-items：baseline”，如何水平对齐两个文本元素的基线？

JSX：

<View style={styles.numberAndPercent}>
  <Text style={styles.number}>6.80</Text>
  <Text style={styles.percent}>%</Text>
</View>

Answer 1

React Native现在支持alignItems: 'baseline'，因此以下内容应该有效：

numberAndPercent: {
  flexDirection: 'row',
  alignItems: 'baseline',
}

Flexbox docs here;完整的支持值列表here。

Answer 2

尝试：

{
  numberAndPercent: {
    flex: 1,
    justifyContent: 'flex-end'
  }
}

另外：

{
  number: {
    alignSelf: 'flex-end'
  },

  percent: {
    alignSelf: 'flex-end'
  }
}

Answer 3

目前，React Native支持除 baseline 之外的所有Flexbox属性。若要解决此问题，您可以将高度设置为与字体大小相同。

textBig: {
  fontSize: 40,
  height: 40,
}
textSmall: {
  fontSize: 18,
  height: 18,
}

它不是一个完美的解决方案，但它现在已经完成了工作。

Answer 4

<Text style={styles.numberAndPercent}>
  <Text style={styles.number}>6.80</Text>
  <Text style={styles.percent}>%</Text>
</Text>

Answer 5

试试这个

{
    fontSize: 40,
    lineHeight: 40 * 0.75,
    paddingTop: 40 - (35 * 0.75), // <-- Add this
}