react-native - 如何删除 React Native Text 组件下不需要的填充？

Question

我正在尝试制作一个带有颜色背景和非常薄的填充的文本组件。像这样:



但是，RN Text 组件底部有一些额外的填充，我不知道如何删除(我不知道如何调用这种文本填充)。

我尝试将 lineHeight 设置为与 fontSize 相同，设置负填充和边距，但填充始终存在。

这是我得到的:
fontSize: 50, lineHeight: 50

fontSize: 50, lineHeight: 40


这发生在 iOS 和 Android 上。怎么去掉？？？

这是我的文本组件供引用:

<Text style={{
    backgroundColor: someDarkGreen;
    color: cyan;
    fontSize: 50;
    lineHeight: 50;
    textTransform: uppercase;
    fontWeight: bold;
    paddingHorizontal: 10;
    alignSelf: flex-start;
    marginBottom: 30;
    marginLeft: 30;
  }}
/>

Answer 1

对于我的问题，我仍然没有“明确的答案”，但由于它不断获得赞成票，我将分享我的解决方法。
我包了<Text>在 <View> ，并将背景样式放在 View 上。然后我translateY文本，使其以 View 背景为中心显示:

<View
  style={{
    backgroundColor: 'purple',
    paddingHorizontal: 10,
    height: 50, // <------------------------- adjust background height here
  }}
>
  <Text
    style={{
      color: 'pink',
      fontSize: 50,
      lineHeight: 50,
      textTransform: 'uppercase',
      fontWeight: 'bold',
      alignSelf: 'flex-start',
      transform: [{ translateY: 5 }], // <-----  adjust text position here
    }}
  >
    Hello
  </Text>
</View>

注意:使用 marginTop: 5而不是 transform: [{ translateY: 5 }]调整文本位置也有效， 只要 View 具有固定的高度 .
这允许在我最初发布问题时获得我正在寻找的薄垂直填充效果。在 iOS 和 Android 上看起来都不错: