如何模拟“对齐项目:基线"?在React Native中? [英] How to simulate "align-items: baseline" in 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中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！