React native 反应自然。如何在垂直居中对齐的行中放置两个字体大小不同的文本

我需要将两个

Text

组件与不同的

fontSize

对齐，并垂直居中。我现在有以下几点

导出默认类App扩展React.Component{
render（）{
返回(
字号20
字体大小14
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
},
行：{
flexDirection:'行'，
背景颜色：“红色”，
},
正文1：{
尺寸：20，
背景颜色：“蓝色”，
},
文本2：{
尺寸：14，
背景颜色：“绿色”，
},
});

您需要将

alignItems:“居中”

添加到

样式。行

row: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'red',
},

---

对于尚未找到解决方案的任何人，您必须将文本包装到另一个文本标记中：

<View style={styles.container}>
  <View style={styles.row}>
    <Text>
      <Text style={styles.text1}>Font size 20</Text>
      <Text style={styles.text2}>Font size 14</Text>
    </Text>
  </View>
</View>

字号20
字体大小14

谢谢，它适用于我的示例，但在我的项目中，它实际上不适用于自定义字体。它应该垂直对齐内容，除非有其他填充或边距。如果我从样式中删除

fontFamily

，它可以工作，但不适用于自定义字体。不确定这是否是字体的线条高度问题，尝试使用

lineHeight

进行调整，我已经尝试过了，但也没有帮助。我放弃了这个，看起来这里有些问题，我只是在中间的第二个字体中添加了填充。嘿，找到解决方法了吗？@Return-1检查下面的答案和评论，这就是整个故事。看起来这是自定义字体和填充解决方案的问题。嗯，我想知道这个解决方案是否能统一适用于所有设备。我也在使用自定义字体（虽然不是很少见），而且看起来文本的大小比文本本身大，这意味着文本没有正确对齐。

<View style={styles.container}>
  <View style={styles.row}>
    <Text>
      <Text style={styles.text1}>Font size 20</Text>
      <Text style={styles.text2}>Font size 14</Text>
    </Text>
  </View>
</View>