Supprimer l'espacement vertical du texte React Native

Question

J'ai créé un composant CustomText pour utiliser la famille de polices Poppins. Mais lorsque je l'utilise, j'obtiens un espace vertical qui finit par s'agrandir à mesure que la taille de la police augmente, créant ainsi un espace inutile entre les deux composants CustomText.

J'ai essayé d'utiliser padding:0,margin:0,line-height:undefined fontSize mais aucun d'entre eux n'a fonctionné. Voici mon code CustomText :

const CustomText : React.FC

  style,
  est audacieux,
  estItalique,
  taille de police,
  couleur,
  ...restProps
}) =>
  fontSize ??= fontSizes.xsm;
  const combinéStyles = [
    styles.defaultText,
    style,
    isBold && styles.boldText,
    isItalic && styles.italicText,
    { taille de police : taille de police },
    { couleur : couleur ??
  ];

  return ;
} ;

const styles = StyleSheet.create({
  Texte par défaut : {
    fontFamily : "Poppins-Regular",
  },
  texte en gras: {
    fontFamily : "Poppins-Bold",
  },
  Texte italique : {
    fontFamily : "Poppins-Italic",
  },
});
≪/pré>
Voici un exemple de ce qui se passe lorsque j'utilise l'exemple d'image
J'ai utilisé backgroundColor:'green' pour voir l'espace vertical et c'était trop. 
Je souhaite contrôler l’espacement entre les éléments de texte. Je suis nouveau dans la réaction native, toute aide serait grandement appréciée. Merci
            

Answer 1

Par défaut, la propriété lineHeight est définie sur un multiple de la taille de la police.

Vous pouvez le définir vous-même en ajoutant {lineHeight: fontSize} (ou tout autre montant souhaité) à combinedStyles.

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

Essayez également de définir paddingTop ou paddingBottom ou ma​​rginTop ou ma​​rginBottom individuellement, car ils peuvent être définis ailleurs en remplaçant le remplissage général et les marges.

Définissez également includeFontPadding: false car il peut y avoir un remplissage de police par défaut.