Alih keluar jarak menegak daripada teks React Native

Question

Saya membuat komponen Teks Tersuai untuk menggunakan keluarga fon Poppins. Tetapi apabila menggunakannya, saya mendapat ruang menegak yang akhirnya menjadi lebih besar apabila saiz fon meningkat, mewujudkan ruang yang tidak perlu antara dua komponen CustomText.

Saya cuba menggunakan padding:0,margin:0,line-height:undefined fontSize tetapi tiada satu pun yang berkesan. Ini ialah kod Teks Tersuai saya:

const CustomText: React.FC

  gaya,
  adalah berani,
  adalah Italic,
  Saiz huruf,
  warna,
  ... restProps
}) =>
  fontSize ??= fontSizes.xsm;
  const combinedStyles = [
    styles.defaultText,
    gaya,
    ialah gaya && boldText,
    adalahItalic && styles.italicTeks,
    { fontSize: fontSize },
    { warna: warna ??
  ];

  kembalikan ;
};

gaya const = StyleSheet.create({
  defaultTeks: {
    fontFamily: "Poppins-Regular",
  },
  teks tebal: {
    fontFamily: "Poppins-Bold",
  },
  italicTeks: {
    fontFamily: "Poppins-Italic",
  },
});

Berikut ialah contoh perkara yang berlaku apabila saya menggunakan imej sampel
Saya menggunakan backgroundColor:'hijau' untuk melihat ruang menegak dan ia terlalu banyak. 
Saya mahu mengawal jarak antara elemen teks. Saya baru untuk bertindak balas asli, sebarang bantuan akan sangat dihargai. Terima kasih

Answer 1

Secara lalai, sifat lineHeight ditetapkan kepada berbilang saiz fon.

Anda boleh menetapkannya sendiri dengan menambah {lineHeight: fontSize} (atau sebarang jumlah lain yang dikehendaki) pada Gaya gabungan.

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

Juga cuba tetapkan paddingTop atau paddingBottom atau ma​​rginTop atau ma​​rginBottom secara individu, kerana ia mungkin ditakrifkan di tempat lain mengatasi padding dan margin umum.

Juga tetapkan includeFontPadding: false kerana mungkin terdapat pelapik fon lalai.