如何模拟“对齐项目:基线"?在React Native中?

本文介绍了如何模拟“对齐项目:基线"?在React Native中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

由于RN在Flexbox的实现中没有"align-items:基线"，因此如何水平对齐两个文本元素的基线?

Since there is no "align-items: baseline" in RN's implementation of Flexbox, how can I align the baselines of two text element horizontally?

JSX:

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

React Native现在支持alignItems: 'baseline'，因此以下各项应能工作:

React Native now supports alignItems: 'baseline', so the following should work:

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

Flexbox文档此处；支持的值的完整列表此处.

Flexbox docs here; full list of supported values here.

这篇关于如何模拟“对齐项目:基线"?在React Native中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！