從 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 或upginTop 或ma​​rginBottom# ，因為它們可能是在其他地方定義的覆蓋一般的填充和邊距。

也要設定includeFontPadding: false，因為可能有預設字體填充。