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

Question

我制作了一个 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",
  },
});

这是我使用示例图像时发生的情况的示例

我使用backgroundColor:'green'来查看垂直空间，它太多了。

我想控制文本元素之间的间距。我是反应本机的新手，任何帮助将不胜感激。谢谢

Answer 1

默认情况下，lineHeight 属性设置为字体大小的倍数。

您可以将 {lineHeight: fontSize}（或任何其他所需的数量）添加到 combinedStyles 中自行设置。

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

还可以尝试单独设置 paddingTop 或 paddingBottom 或 ma​​rginTop 或 ma​​rginBottom ，因为它们可能是在其他地方定义的覆盖一般的填充和边距。

还要设置includeFontPadding: false，因为可能有默认字体填充。