css 从React Native文本中删除垂直间距

waxmsbnn  于 2023-05-08  发布在  React
关注(0)|答案(1)|浏览(171)

我做了一个CustomText组件来使用Poppins字体家族。但是在使用它的时候,我得到的垂直空间最终会变大,因为fontsize在两个CustomText组件之间创建了不必要的空间。
我尝试使用padding:0,margin:0,line-height:undefined| fontSize但是没有一个在这里工作。下面是我的CustomText代码:

const CustomText: React.FC<CustomTextProps> = ({

  style,
  isBold,
  isItalic,
  fontSize,
  color,
  ...restProps
}) => {
  fontSize ??= fontSizes.xsm;
  const combinedStyles = [
    styles.defaultText,
    style,
    isBold && styles.boldText,
    isItalic && styles.italicText,
    { fontSize: fontSize },
    { color: color ?? "black" },
  ];

  return <Text style={combinedStyles} {...restProps} />;
};

const styles = StyleSheet.create({
  defaultText: {
    fontFamily: "Poppins-Regular",
  },
  boldText: {
    fontFamily: "Poppins-Bold",
  },
  italicText: {
    fontFamily: "Poppins-Italic",
  },
});

这是我使用example image时发生的情况的示例
我使用backgroundColor:'green'来查看垂直空间,它太多了。
我想控制Text元素之间的间距。我是react-native的新手,任何帮助都将不胜感激。谢谢

lhcgjxsq

lhcgjxsq1#

默认情况下,lineHeight属性设置为字体大小的倍数。
您可以在combinedStyles中添加{lineHeight: fontSize}(或其他任意数量),自己设置。

const combinedStyles = [
    styles.defaultText,
    style,
    isBold && styles.boldText,
    isItalic && styles.italicText,
    { fontSize: fontSize },
    { color: color ?? "black" },
    { lineHeight: fontSize },
  ];

另外,请尝试单独设置paddingToppaddingBottommarginTopmarginBottom,因为它们可能在其他地方定义,从而覆盖常规的填充和边距。
还设置includeFontPadding: false,因为可能有默认的字体填充。

相关问题