alignItems：基准在Android上不起作用

Question

我正在尝试创建一个短语，该短语的字体大小都在底部对齐，因此，我做了以下事情：

<View style={styles.header}>
  <TextCustomized style={styles.balance} text="você tem" />
  <TextCustomized style={styles.number} text=" R$" />
  <TextCustomized style={styles.integer} text="100" />
  <TextCustomized style={styles.number} text=",00" />
  <TextCustomized style={styles.balance} text=" de saldo" />
</View>

const styles = StyleSheet.create({
  header: {
   flexDirection: 'row',
   alignItems: 'baseline',
   justifyContent: 'center',
   paddingTop: 10,
   borderBottomWidth: 1,
   borderBottomColor: '#e1e1e1',
   paddingBottom: 10,
 },
 balance: {
   fontSize: 14
 },
 number: {
  fontSize: 18,
  color: '#0778e4',
  fontWeight: 'bold',
 },
 integer: {
   fontSize: 30,
   color: '#0778e4',
   fontWeight: "800",
   lineHeight: 30,
 },
})

它在iOS上完美运行，但是在Android上却无法正常运行，如您在此PS上所见。

我该如何实现？

Answer 1

作为一种解决方法，您可以将要对齐的基线的文本包装到Text元素中。此时，父级中的alignItems: baseline将是不必要的。这样的事情应该起作用：

<View style={styles.header}>
  <Text>
    <TextCustomized style={styles.balance} text="você tem" />
    <TextCustomized style={styles.number} text=" R$" />
    <TextCustomized style={styles.integer} text="100" />
    <TextCustomized style={styles.number} text=",00" />
    <TextCustomized style={styles.balance} text=" de saldo" />
  </Text>
</View>

const styles = StyleSheet.create({
  header: {
   flexDirection: 'row',
   justifyContent: 'center',
   paddingTop: 10,
   borderBottomWidth: 1,
   borderBottomColor: '#e1e1e1',
   paddingBottom: 10,
 },
 balance: {
   fontSize: 14
 },
 number: {
  fontSize: 18,
  color: '#0778e4',
  fontWeight: 'bold',
 },
 integer: {
   fontSize: 30,
   color: '#0778e4',
   fontWeight: "800",
   lineHeight: 30,
 }
});