How to remove unwanted padding under React Native Text component?

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>在 a 中<View>，并将背景样式放在视图上。然后我设置translateY文本，使其显示在视图背景的中心：

<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>

注意：只要 View 具有固定的 heightmarginTop: 5 ，使用而不是transform: [{ translateY: 5 }]调整 Text 位置也是可行的。

这可以实现我最初发布问题时所寻找的薄垂直填充效果。它在 iOS 和 Android 上看起来都不错：