react native text size
v3.0.0
Ukur teks dengan akurat sebelum meletakkannya dan dapatkan informasi font dari aplikasi Anda (Android dan iOS).
| Di negara saya (Meksiko), pengembang perangkat lunak dibayar dengan buruk, jadi saya harus mencari pekerjaan lain untuk mencari nafkah dan saya tidak dapat mendedikasikan lebih banyak waktu untuk memelihara ini dan repositori lain yang selama bertahun -tahun telah dibutuhkan menghasilkan uang untuk saya. Jika ada orang yang tertarik dalam mempertahankan repositori ini, saya akan dengan senang hati mentransfernya kepada mereka, bersama dengan paket NPM terkait. |
|---|
| Di negara saya (Meksiko), pengembang perangkat lunak ketakutan, jadi saya harus mencari pekerjaan lain untuk mencari nafkah dan saya tidak dapat menghabiskan lebih banyak waktu untuk menjaga ini dan repositori lain daripada selama bertahun -tahun tidak pernah menghasilkan uang. Jika seseorang tertarik untuk mempertahankan repositori ini, saya dengan senang hati akan mentransfernya, serta paket NPM terkait. |
Ada dua fungsi utama: flatHeights untuk mendapatkan ketinggian blok teks yang berbeda secara bersamaan, dioptimalkan untuk komponen seperti <FlatList> atau <RecyclerListView> .
Yang lainnya adalah measure , yang mendapat informasi terperinci tentang teks teks:
Lebar dan tingginya praktis sama dengan yang diterima dari acara onLayout komponen <Text> dengan properti yang sama.
Di kedua fungsi, teks yang akan diukur diperlukan, tetapi sisa parameternya opsional dan bekerja dengan cara yang sama seperti dengan React Native:
fontFamilyfontSizefontWeightfontStylefontVariant (iOS)includeFontPadding (Android)textBreakStrategy (Android)letterSpacingallowFontScalingwidth : Kendala untuk Break Garis Otomatis Berdasarkan Strategi-Broak Teks.Di Adionion, perpustakaan mencakup fungsi untuk mendapatkan informasi tentang font yang terlihat oleh aplikasi.
Jika itu telah membantu Anda, tolong dukung pekerjaan saya dengan bintang ️ atau ko-fi.
Sebagian besar instalasi otomatis dari NPM
yarn add react-native-text-size
react-native link react-native-text-size Ubah compile Directive ke implementation di Blok Dependensi File Android/App/Build.GREE.
Persyaratan:
Untuk versi sebelum 0,56 dari React Native, silakan gunakan react-native-text-size v2.1.1
Lihat instalasi manual di wiki sebagai alternatif jika Anda memiliki masalah dengan instalasi otomatis.
measure
flatHeights
specsForTextStyles
fontFromSpecs
fontFamilyNames
fontNamesForFamilyName
measure ( options : TSMeasureParams ) : Promise < TSMeasureResult > Fungsi ini mengukur teks seperti yang dilakukan RN dan hasilnya terdiri* dengan peristiwa onlayout Text . Dibutuhkan subset dari properti yang digunakan oleh <Text> untuk menggambarkan opsi font dan oher untuk digunakan.
Jika Anda memberikan width , pengukuran akan menerapkan pembungkus otomatis selain jeda garis eksplisit.
* Mungkin ada tidak konsisten di iOS, lihat masalah ini untuk mengetahui lebih banyak.
Catatan:
Meskipun fungsi ini akurat dan memberikan informasi lengkap, itu bisa berat jika teksnya banyak, seperti yang dapat ditampilkan dalam daftar datar. Untuk kasus ini, lebih baik menggunakan flatHeights , yang dioptimalkan untuk pemrosesan batch.
Objek JS biasa dengan properti ini (hanya diperlukan text ):
| MILIK | Jenis | Bawaan | Catatan |
|---|---|---|---|
| Teks | Rangkaian | (Tidak ada) | Ini adalah satu -satunya parameter yang diperlukan dan mungkin termasuk emoji atau kosong, tetapi tidak boleh null .Jika ini adalah string kosong, width yang dihasilkan akan menjadi nol. |
| FontFamily | Rangkaian | Saya bergantung | Standarnya sama diterapkan oleh React Native: Roboto di Android, San Francisco di iOS. Catatan: Produsen perangkat atau ROM khusus dapat mengubah font default. |
| Kelas font | Rangkaian | 'normal' | Di Android, rentang angka Anda tidak memiliki granularitas dan '500' hingga '900' menjadi 'berani', tetapi Anda dapat menggunakan fontFamily dengan berat spesifik ("sans-serif-thin", "sans-serif-medium", dll). |
| Fontsize | Nomor | 14 | Ukuran font default berasal dari RN. |
| FontStyle | Rangkaian | 'normal' | Salah satu dari "normal" atau "miring". |
| Fontvariant | Array | (Tidak ada) | iOS saja |
| AllowfontScaling | Boolean | BENAR | Untuk menghormati pengaturan pengguna yang besar (yaitu menggunakan unit SP). |
| Letterspacing | Nomor | (Tidak ada) | Jarak tambahan antara karakter (alias tracking ).Catatan: Di iOS A nol membatalkan kering otomatis. Semua iOS, android dengan API 21+ |
| Termasuk di antaranya | Boolean | BENAR | Bantalan atas dan bawah tambahan, untuk menghindari kliping karakter tertentu. Android saja |
| TextBreakStrategy | Rangkaian | 'Highqualy' | Salah satu 'sederhana', 'seimbang', atau 'highqualy'. Android saja, dengan API 23+ |
| Lebar | Nomor | Max_int | Batasi lebarnya. Tinggi hasil akan bervariasi tergantung pada aliran otomatis teks. |
| Useprecisewidth | Boolean | PALSU | Jika true , hasilnya akan mencakup width yang tepat dan properti lastLineWidth .Anda dapat melihat efek bendera ini di aplikasi sampel. |
| LineInfoforline | Nomor | (Tidak ada) | Jika >=0 , hasilnya akan menyertakan properti LineInfo dengan informasi untuk nomor baris yang diperlukan. |
Aplikasi sampel menunjukkan secara interaktif efek parameter ini pada layar.
measure mengembalikan janji yang diselesaikan menjadi objek JS dengan properti ini:
| MILIK | Jenis | Catatan |
|---|---|---|
| Lebar | Nomor | Total lebar yang digunakan. Mungkin LES atau sama dengan opsi width .Di Android, nilai ini dapat bervariasi tergantung pada bendera usePreciseWidth . |
| Tinggi | Nomor | Tinggi total, termasuk bantalan atas dan bawah jika includingFontPadding telah ditetapkan (default). |
| Lastlinewidth | Nomor | Lebar baris terakhir, tanpa tertinggal kosong. Jika usePreciseWidth adalah false (default), properti ini tidak ditentukan. |
| Linecount | Nomor | Jumlah baris, dengan mempertimbangkan istirahat garis yang keras dan otomatis. |
| Lineinfo | Obyek | Informasi baris. Jika opsi lineInfoForLine tidak diberikan, properti ini tidak ditentukan. |
Jika nilai lineInfoForLine adalah Greelter atau lineCount yang sama, info ini untuk baris terakhir (yaitu lineCount - 1).
| MILIK | Jenis | Catatan |
|---|---|---|
| GARIS | Nomor | Nomor baris info ini, basis 0. Ini bisa lebih kecil dari garis lineInfoForLine . |
| Awal | Nomor | Offset teks dari awal baris ini. |
| akhir | Nomor | Offset teks setelah karakter yang terlihat terakhir (jadi whitespace tidak dihitung) pada baris ini. |
| Dasar | Nomor | Posisi vertikal bagian bawah garis ini, termasuk padding. |
| Lebar | Nomor | Exte horizontal dari garis ini, termasuk indentasi margin terkemuka, tetapi tidak termasuk whitespace trailing. Gunakan usePreciseWidth:true untuk mendapatkan nilai yang akurat untuk properti ini. |
Dalam hal kesalahan, janji ditolak dengan objek yang diperluas dengan salah satu kode kesalahan berikut, sebagai string literal:
| Kode | Detail |
|---|---|
| E_missing_parameters | measure membutuhkan objek dengan parameter, yang tidak disediakan. |
| E_missing_text | Teks yang akan diukur adalah null atau tidak disediakan. |
| E_INVALID_FONT_SPEC | Spesifikasi font tidak valid. Tidak mungkin ini akan terjadi di Android. |
| E_unknown_error | Nah ... siapa yang tahu? |
//...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'
type Props = { }
type State = { width : number , height : number }
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
fontFamily = undefined ,
fontSize = 24 ,
fontStyle = 'italic' ,
fontWeight = 'bold' ,
}
const text = 'I ❤️ rnTextSize'
class Test extends Component < Props , State > {
state = {
width : 0 ,
height : 0 ,
}
async componentDidMount ( ) {
const width = Dimensions . get ( 'window' ) . width * 0.8
const size = await rnTextSize . measure ( {
text , // text to measure, can include symbols
width , // max-width of the "virtual" container
... fontSpecs , // RN font specification
} )
this . setState ( {
width : size . width ,
height : size . height
} )
}
// The result is reversible
render ( ) {
const { width , height } = this . state
return (
< View style = { { padding : 12 } } >
< Text style = { { width , height , ... fontSpecs } } >
{ text }
</ Text >
</ View >
)
}
} flatHeights ( options : TSHeightsParams ) : Promise < number [ ] >Hitung ketinggian masing -masing string dalam array.
Ini adalah alternatif untuk measure yang ditunjuk untuk kasus -kasus di mana Anda telah menghitung ketinggian blok teks yang jumlah dengan karakteristik umum (lebar, font, dll.), Komponen Penggunaan Khas dengan komponen <FlatList> atau <RecyclerListView> .
Pengukuran menggunakan algoritma yang sama sebagai measure tetapi hanya mengembalikan ketinggian setiap blok dan, dengan menghindari beberapa langkah melalui jembatan, lebih cepat ... jauh lebih cepat di Android!
Saya melakukan tes pada 5.000 blok teks acak dan ini adalah hasilnya (MS):
measure | flatHeights | |
|---|---|---|
| Android | 49.624 | 1.091 |
| iOS | 1.949 | 732 |
Di masa depan saya akan menyiapkan contoh penggunaannya dengan flatlist dan banyak gaya pada kartu yang sama.
Ini adalah objek yang mirip dengan yang Anda lewati untuk measure , tetapi opsi text adalah array string dan opsi usePreciseWidth dan lineInfoForLine diabaikan.
| MILIK | Jenis | Bawaan |
|---|---|---|
| Teks | Rangkaian [] | (Tidak ada) |
| Lebar | Nomor | Ketakterbatasan |
| FontFamily | Rangkaian | Saya bergantung |
| Kelas font | Rangkaian | 'normal' |
| Fontsize | Nomor | 14 |
| FontStyle | Rangkaian | 'normal' |
| Fontvariant | Array | (Tidak ada) |
| AllowfontScaling | Boolean | BENAR |
| Letterspacing | Nomor | (Tidak ada) |
| Termasuk di antaranya | Boolean | BENAR |
| TextBreakStrategy | Rangkaian | 'Highqualy' |
Hasilnya adalah janji yang diselesaikan menjadi array dengan ketinggian setiap blok (dalam SP ), dalam urutan yang sama di mana blok diterima.
Tidak seperti pengukuran, elemen null mengembalikan 0 tanpa kesalahan menghasilkan, dan string kosong mengembalikan ketinggian yang sama dengan yang ditetapkan RN untuk null komponen <Text> .
//...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'
type Props = { texts : string [ ] }
type State = { heights : number [ ] }
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
fontFamily = undefined ,
fontSize = 24 ,
fontStyle = 'italic' ,
fontWeight = 'bold' ,
}
const texts = [ 'I ❤️ rnTextSize' , 'I ❤️ rnTextSize using flatHeights' , 'Thx for flatHeights' ]
class Test extends Component < Props , State > {
state = {
heights : [ ] ,
}
async componentDidMount ( ) {
const { texts } = this . props
const width = Dimensions . get ( 'window' ) . width * 0.8
const heights = await rnTextSize . flatHeights ( {
text : texts , // array of texts to measure, can include symbols
width , // max-width of the "virtual" container
... fontSpecs , // RN font specification
} )
this . setState ( {
heights
} )
}
render ( ) {
const { texts } = this . props
const { heights } = this . state
return (
< View style = { { padding : 12 } } >
{ texts . map (
( text , index ) => (
< Text style = { { height : heights [ index ] , ... fontSpecs } } >
{ text }
</ Text >
)
) }
</ View >
)
}
} specsForTextStyles ( ) : Promise < { [ key : string ] : TSFontForStyle } >Dapatkan informasi font sistem untuk OS yang sedang berjalan.
Ini adalah pembungkus untuk UIFont.preferredFontForTextStyle oros
Hasilnya adalah janji yang diselesaikan menjadi objek JS WHOE Keys bergantung pada OS, tetapi nilai -nilai itu pada gilirannya objek sepenuhnya kompatibel dengan yang digunakan dalam gaya RN, sehingga dapat digunakan untuk menata komponen <Text> atau <TextInput> :
| MILIK | Jenis | Catatan |
|---|---|---|
| FontFamily | Rangkaian | Nama keluarga atau wajah font. |
| Fontsize | Nomor | Ukuran font dalam SP (tidak dikenakan). |
| FontStyle | Tsfontstyle | Hanya jika 'miring', tidak terdefinisi jika gayanya 'normal'. |
| Kelas font | Kelas tsfont | Hanya jika 'tebal', tidak terdefinisi jika beratnya 'normal'. |
| Fontvariant | Tsfontvariant [] atau null | iOS saja . Saat ini, tidak ada gaya yang termasuk properti ini. |
| Letterspacing | Nomor | Dihilangkan jika berjalan di Android dengan RN Loower dari 0,55 |
Untuk mengetahui nama -nama kunci, silakan lihat kunci dari SpecsfortextStyles di wiki.
Saya belum mencoba menormalkan kunci hasil karena pengecualian dua atau tiga, mereka memiliki interpretasi yang berbeda di setiap OS, tetapi Anda dapat menggunakannya untuk membuat gaya bea cukai sesuai dengan kebutuhan Anda.
fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >Mengembalikan karakteristik font yang diperoleh dari spesifikasi yang diberikan.
Parameter ini adalah subset dari TSMeasureParams , sehingga detailnya dihilangkan di sini.
| MILIK | Jenis | Bawaan |
|---|---|---|
| FontFamily | Rangkaian | iOS: 'San Francisco', Android: 'Roboto' |
| Kelas font | Rangkaian | 'normal' |
| Fontsize | Nomor | 14 |
| FontStyle | Rangkaian | 'normal' |
| Fontvariant | Rangkaian [] | (Tidak ada) |
| Letterspacing | Nomor | 0 |
fontFromSpecs menggunakan implisit yang includeFontPadding allowsFontScaling:true
Hasilnya adalah janji yang diselesaikan menjadi objek JS dengan info untuk font dan ukuran yang diberikan, unit di SP di Android atau poin di iOS, menggunakan nomor titik mengambang di mana diterapkan*.
| MILIK | Jenis | Detail |
|---|---|---|
| FontFamily | Rangkaian | Di Android, string yang sama dilewatkan sebagai parameter. |
| Fontname | Rangkaian | Hanya iOS , selalu undefined di Android. |
| Fontsize | Nomor | Mungkin berbeda dari parameter yang diberikan jika parameter mencakup desimal. |
| FontStyle | Rangkaian | 'Normal' atau 'miring'. |
| Kelas font | Rangkaian | 'Normal' atau 'tebal', di iOS dapat beralih dari '100' ke '900'. |
| Fontvariant | Rangkaian [] | Hanya iOS , selalu undefined di Android. |
| naik | Nomor | Jarak yang disarankan di atas baseline untuk teks spasi yang dipilih. |
| turun | Nomor | Jarak yang disarankan di bawah garis dasar untuk teks spasi yang dipilih. |
| Capheight | Nomor | iOS hanya ketinggian karakter modal. |
| Xheight | Nomor | iOS hanya ketinggian huruf kecil "x". |
| atas | Nomor | Android saja . Jarak maksimum di atas garis dasar untuk mesin terbang Tallles di font. |
| Dasar | Nomor | Android saja . Jarak maksimum di bawah garis dasar untuk mesin terbang terendah di font. |
| Terkemuka | Nomor | Ruang tambahan yang disarankan untuk menambah antara baris teks. |
| LineHeight | Nomor | Tinggi garis yang disarankan. Seharusnya lebih besar jika teks berisi simbol unicode, seperti emoji. |
| _Hash | Nomor | Kode hash, mungkin berguna untuk debugging. |
* Menggunakan pelampung lebih akurat daripada bilangan bulat dan memungkinkan Anda menggunakan metode pembulatan yang lebih disukai, tetapi tidak lebih dari 5 digit presisi dalam nilai ini. Juga, ingat RN tidak berfungsi dengan subpixel di Android dan akan memotong nilai ini.
Lihat lebih banyak di:
Memahami tipografi di situs desain material Google.
Tentang penanganan teks di iOS untuk iOS.
fontFamilyNames ( ) : Promise < string [ ] >Mengembalikan janji untuk berbagai nama keluarga font yang tersedia di sistem.
Di iOS, ini Anda menggunakan metode UIFont.familyNames dari uIKit.
Di Android, hasilnya lebih keras untuk font sistem dan melengkapi secara dinamis dengan font yang diinstal oleh aplikasi Anda, jika ada.
Lihat tentang font android dan font khusus di wiki untuk mengetahui lebih banyak tentang daftar ini.
fontNamesForFamilyName ( fontFamily : string ) : Promise < string [ ] > Pembungkus untuk metode UIFont.fontNamesForFamilyName dari UIKIT, mengembalikan serangkaian nama font yang tersedia dalam keluarga font tertentu.
Anda dapat menggunakan fungsi fontFamilyNames RNTEXTSIZE untuk mendapatkan array dari nama keluarga font yang tersedia di sistem.
Ini adalah fungsi iOS saja , di android selalu diselesaikan menjadi null .
Di iOS, lebar yang dihasilkan dari keduanya, measure dan flatHeights , termasuk whitespace terkemuka saat berada di Android ini dibuang.
Di iOS, RN memperhitungkan posisi absolut di layar untuk menghitung dimensi. RnTextSize tidak dapat melakukan itu dan keduanya, lebar dan tinggi, dapat memiliki perbedaan hingga 1 piksel (bukan titik).
RN tidak mendukung ukuran tipe dinamis, tetapi melakukan pekerjaan yang sangat baik meniru fitur ini thruch allowFontScaling ... excep untuk letterSpacing yang tidak diskalakan.
Saya berharap bahwa versi RN di masa depan memecahkan masalah ini.
Meskipun rNTextSize menyediakan lineHeight yang dihasilkan dalam fungsi SUM, itu tidak mendukungnya sebagai parameter karena Anda menggunakan algoritma non-standar untuk mengaturnya. Saya sarankan Anda tidak menggunakan lineHeight kecuali itu sangat membutuhkan, tetapi jika Anda menggunakannya, cobalah untuk membuatnya 30% atau lebih dari ukuran font, atau menggunakan metode rntextSize fontFromSpecs jika Anda ingin lebih presisi.
Komponen <Text> bersarang (atau dengan gambar di dalam)
Saya seorang pengembang full-stack dengan lebih dari 20 tahun pengalaman dan saya mencoba untuk membagikan sebagian besar pekerjaan saya secara gratis dan membantu orang lain, tetapi ini membutuhkan banyak waktu dan upaya sehingga, jika Anda menyukai pekerjaan saya, silakan pertimbangkan ...
Tentu saja, umpan balik, PR, dan bintang juga diterima?
Terima kasih atas dukungan Anda!
Lisensi BSD 2-Clause "disederhanakan".
© 2018-2019, Alberto Martínez. Semua hak dilindungi undang -undang.
