react-native - alignItems : baseline not working on Android

我正在尝试创建一个短语，它具有不同的字体大小，全部对齐在底部，因此，我执行了以下操作:

<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 上看到的那样。



我怎样才能实现它？

最佳答案

作为解决方法，您可以将想要对齐基线的文本包装到 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,
 }
});

关于react-native - alignItems : baseline not working on Android，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51293914/