Alih keluar jarak menegak daripada teks React Native
P粉211600174
P粉211600174 2023-09-02 09:04:40
0
1
528
<p>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. </p> <p>Saya cuba menggunakan padding:0,margin:0,line-height:undefined fontSize tetapi tiada satu pun yang berkesan. Ini ialah kod Teks Tersuai saya: </p> <pre class="brush:js;toolbar:false;">const CustomText: React.FC<CustomTextProps> 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 teks={combinedStyles} {...restProps} />; }; gaya const = StyleSheet.create({ defaultTeks: { fontFamily: "Poppins-Regular", }, teks tebal: { fontFamily: "Poppins-Bold", }, italicTeks: { fontFamily: "Poppins-Italic", }, }); </pra> <p>Berikut ialah contoh perkara yang berlaku apabila saya menggunakan imej sampel</p> <p>Saya menggunakan backgroundColor:'hijau' untuk melihat ruang menegak dan ia terlalu banyak. </p> <p>Saya mahu mengawal jarak antara elemen teks. Saya baru untuk bertindak balas asli, sebarang bantuan akan sangat dihargai. Terima kasih</p>
P粉211600174
P粉211600174

membalas semua(1)
P粉514001887

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan