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

您必须尝试以下操作：

代码：

     backgroundColor:'#000',
     color: '#fff',
     fontSize: 50,
     fontWeight: '100',
     padding: 8,
     textAlign: 'auto'

Answer 2

我的问题仍然没有一个“明确的答案”，但是由于它一直在投票，我将分享我的解决方法。

我将<Text>包裹在<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>

注意：只要视图具有固定的高度，即可使用marginTop: 5而不是transform: [{ translateY: 5 }]来调整文本位置。

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

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

2 个答案: