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

【问题标题】：How to simulate "align-items: baseline" in React Native?如何在 React Native 中模拟“align-items：baseline”？
【发布时间】：2016-07-11 13:38:57
【问题描述】：

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

JSX：

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

【问题讨论】：

我无法理解你在说什么效果。您能详细说明您在这里想要实现的具体目标吗？

标签： ios react-native flexbox

【解决方案1】：

React Native 现在支持alignItems: 'baseline'，所以以下应该可以工作：

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

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

【讨论】：

感谢您的通知！好久没看 React Native 了，才发现很多难题都解决了（这个和文本省略号之类的）！
我在您提供的链接中没有看到对 baseline 的任何支持。他们是否取消了支持？
感谢您的澄清——我刚刚在支持选项的完整列表中添加了 new link。他们仍然支持baseline。
有基线开始吗？哈哈哈

【解决方案2】：

试试：

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

另外：

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

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

【讨论】：

【解决方案3】：

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

文本大：{ 字体大小：40，身高：40， } 文本小：{ 字体大小：18，身高：18， }

这不是一个完美的解决方案，但现在可以完成工作。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

试试这个

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

【讨论】：