Entfernen Sie den vertikalen Abstand aus React Native-Text

Question

Ich habe eine CustomText-Komponente erstellt, um die Poppins-Schriftfamilie zu verwenden. Aber wenn ich es verwende, entsteht vertikaler Abstand, der mit zunehmender Schriftgröße immer größer wird, wodurch unnötiger Abstand zwischen den beiden CustomText-Komponenten entsteht.

Ich habe versucht, padding:0,margin:0,line-height:undefined | zu verwenden, aber nichts davon hat funktioniert. Das ist mein CustomText-Code:

const CustomText: React.FC<CustomTextProps = ({

  Stil,
  isBold,
  isItalic,
  Schriftgröße,
  Farbe,
  ...restProps
}) =>
  Schriftartgröße ??= SchriftartGrößen.xsm;
  const CombinedStyles = [
    Styles.defaultText,
    Stil,
    isBold &&
    isItalic &&
    {fontSize:fontSize},
    {Farbe: Farbe ?? "schwarz"
  ];

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

const Styles = StyleSheet.create({
  Standardtext: {
    Schriftfamilie: "Poppins-Regular",
  },
  fetter Text: {
    Schriftfamilie: „Poppins-Bold“,
  },
  kursiver Text: {
    Schriftfamilie: „Poppins-Italic“,
  },
});

Hier ist ein Beispiel dafür, was passiert, wenn ich das Beispielbild verwende

Ich habe backgroundColor:'green' verwendet, um den vertikalen Raum zu sehen, aber es war zu viel.

Ich möchte den Abstand zwischen Textelementen steuern. Ich bin ein Neuling im Bereich der nativen Reaktion, ich wäre für jede Hilfe sehr dankbar. Vielen Dank

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，因为可能有默认字体填充。