React Native テキストから垂直方向のスペースを削除する

Question

Poppins フォント ファミリを使用する CustomText コンポーネントを作成しました。しかし、これを使用すると、フォントサイズが大きくなるにつれて垂直方向のスペースが大きくなり、2 つの CustomText コンポーネントの間に不必要なスペースができてしまいます。

padding:0,margin:0,line-height:unknown | fontSize を使用してみましたが、どれも機能しません。 これは私の CustomText コードです:

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

  スタイル、
  太字です、
  イタリック体です、
  フォントサイズ、
  色、
  ...restProps
}) => {
  fontSize ??= fontSizes.xsm;
  const combedStyles = [
    スタイル.デフォルトテキスト、
    スタイル、
    isBold &&styles.boldText、
    isItalic &&styles.italicText、
    { フォントサイズ: フォントサイズ }、
    { カラー: カラー ?? "黒" },
  ];

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

const スタイル = StyleSheet.create({
  デフォルトテキスト: {
    fontFamily: "ポピンズ-レギュラー"、
  }、
  太字： {
    フォントファミリー: "Poppins-Bold"、
  }、
  斜体のテキスト: {
    fontFamily: "Poppins-Italic"、
  }、
});

サンプル画像を使用すると何が起こるかの例です

縦方向のスペースを表示するために、backgroundColor:'green' を使用しましたが、広すぎました。

テキスト要素間の間隔を制御したい。私はネイティブに反応するのが初めてなので、助けていただければ幸いです。ありがとうございます

Answer 1

デフォルトでは、lineHeight プロパティはフォント サイズの倍数に設定されます。

{lineHeight: fontSize} (またはその他の任意の量) を combinedStyles に追加することで、自分で設定できます。

リーリー

また、オーバーライドされる可能性があるため、paddingTop または paddingBottom または mar rginTop または mar rginBottom を個別に設定してみてください。一般的なパディングとマージンは別の場所で定義されます。

デフォルトのフォント パディングがある可能性があるため、includeFontPadding: false も設定します。