react native text size
v3.0.0
Mesurez le texte avec précision avant de les disposer et d'obtenir des informations de police de votre application (Android et iOS).
| Dans mon pays (Mexique), les développeurs de logiciels sont mal payés, j'ai donc dû chercher un autre emploi pour gagner ma vie et je ne peux pas consacrer plus de temps à maintenir ce référentiel et d'autres référentiels qui au fil des ans ont besoin de générer de l'argent pour moi. Si quelqu'un est entré-nous dans le maintien de ce référentiel, je serais heureux de le transférer à lui, avec le package NPM associé. |
|---|
| Dans mon pays (Mexique), les développeurs de logiciels sont terrifiés, j'ai donc dû chercher un autre emploi pour gagner ma vie et je ne peux pas passer plus de temps à garder ce des référentiels et d'autres que pendant des années n'a jamais généré d'argent. Si quelqu'un souhaite maintenir ce référentiel, je vais le transférer avec plaisir, ainsi que le package NPM associé. |
Il y a deux fonctions principales: flatHeights pour obtenir la hauteur de différents blocs de texte simultanément, optimisés pour des composants tels que <FlatList> ou <RecyclerListView> .
L'autre est measure , qui obtient des informations détaillées sur le texte du texte:
La largeur et la hauteur sont pratiques de la même manière que celles reçues de l'événement onLayout d'un composant <Text> avec les mêmes propriétés.
Dans les deux fonctions, le texte à mesurer est nécessaire, mais le reste des paramètres est facultatif et fonctionne de la même manière qu'avec React Native:
fontFamilyfontSizefontWeightfontStylefontVariant (iOS)includeFontPadding (Android)textBreakStrategy (Android)letterSpacingallowFontScalingwidth : contrainte pour la rupture automatique basée sur la stratégie de Text-Broak.Dans Adionion, la bibliothèque comprend des fonctions pour obtenir des informations sur les polices visibles par l'application.
Si cela vous a aidé, veuillez soutenir mon travail avec une étoile ️ ou du ko-fi.
Installation principalement automatique de NPM
yarn add react-native-text-size
react-native link react-native-text-size Modifiez la directive compile en implementation dans le bloc des dépendances du fichier Android / App / build.grale.
Exigences:
Pour les versions avant 0,56 de React Native, veuillez utiliser React-Native-Text-Size V2.1.1
Voir l'installation manuelle sur le wiki comme une alternative si vous avez des problèmes d'installation automatique.
measure
flatHeights
specsForTextStyles
fontFromSpecs
fontFamilyNames
fontNamesForFamilyName
measure ( options : TSMeasureParams ) : Promise < TSMeasureResult > Cette fonction mesure le texte comme le fait RN et ses résultats sont constitués * avec celui de l'événement Onlayout du Text . Il faut un sous-ensemble des propriétés utilisées par <Text> pour décrire les options de police et de l'utilisation.
Si vous fournissez width , la mesure appliquera une enveloppement automatique en plus des ruptures de ligne explicites.
* Il peut y avoir des incohérentes dans iOS, voir ce problème de connaissance pour en savoir plus.
Note:
Bien que cette fonction soit exacte et fournit des informations complètes, elle peut être lourde si le texte est beaucoup, comme celui qui peut être affiché dans une liste plate. Pour ces cas, il est préférable d'utiliser flatHeights , qui sont optimisés pour le traitement par lots.
Objet JS ordinaire avec ces propriétés (seul text est requis):
| PROPRIÉTÉ | Taper | Défaut | Notes |
|---|---|---|---|
| Texte | Chaîne | (Aucun) | Il s'agit du seul paramètre requis et peut inclure des emojis ou être vide, mais il ne doit pas être null .S'il s'agit d'une chaîne vide, la width résultante sera nulle. |
| Fonte | Chaîne | Je dépend | La valeur par défaut est la même appliquée par React Native: Roboto dans Android, San Francisco dans iOS. Remarque: le fabricant d'appareils ou la ROM personnalisée peut modifier la police par défaut. |
| Poids de la police | Chaîne | 'normale' | Sur Android, les plages de numéros que vous n'avez pas de granularité et de «500» à «900» devient «gras», mais vous pouvez utiliser fontFamily de poids spécifique («sans-serif-mince», «sans-serif-medium», etc.). |
| S'adapter | Nombre | 14 | La taille de police par défaut provient de RN. |
| Fontstyle | Chaîne | 'normale' | L'un des "normaux" ou "italiques". |
| Policier | Tableau | (Aucun) | iOS seulement |
| Autoriser la mise à jour | Booléen | Vrai | Pour respecter le réglage de l'utilisateur de grandes polices (c'est-à-dire utiliser des unités SP). |
| Placement de lettres | Nombre | (Aucun) | Espacement supplémentaire entre les personnages (aka tracking ).Remarque: Dans iOS, un zéro annule les cassures automatique. Tous les iOS, Android avec API 21+ |
| Includefontpadding | Booléen | Vrai | Le rembourrage supérieur et inférieur addionion, pour éviter d'écraser certains caractères. Android uniquement |
| Textbreakstrategy | Chaîne | 'HighQualy' | L'un des «simples», «équilibrés» ou «highqualy». Android uniquement, avec API 23+ |
| Largeur | Nombre | Max_int | Restreindre la largeur. La hauteur du résultat variera en fonction de l'écoulement automatique du texte. |
| Utilisation | Booléen | FAUX | Si true , le résultat comprendra une width exacte et la propriété lastLineWidth .Vous pouvez voir l'effet de ce drapeau dans l'exemple d'application. |
| Lineinfoforline | Nombre | (Aucun) | Si >=0 , le résultat inclura la propriété LineInfo avec des informations pour le numéro de ligne requis. |
L'exemple d'application montre de manière interactive l'effet de ces paramètres à l'écran.
measure Renvoie une promesse qui se résout à un objet JS avec ces propriétés:
| PROPRIÉTÉ | Taper | Notes |
|---|---|---|
| Largeur | Nombre | Largeur totale utilisée. Il peut être LES ou égal à l'option width .Sur Android, cette valeur peut varier en fonction de l'indicateur usePreciseWidth . |
| Hauteur | Nombre | Hauteur totale, y compris le rembourrage supérieur et inférieur si includingFontPadding a été définie (la valeur par défaut). |
| LastlineWidth | Nombre | Largeur de la dernière ligne, sans blanc. Si usePreciseWidth est false (la valeur par défaut), cette propriété n'est pas définie. |
| LineCount | Nombre | Nombre de lignes, en tenant compte des ruptures de ligne durement et automatique. |
| Lineinfo | Objet | Informations sur la ligne. Si l'option lineInfoForLine n'est pas donnée, cette propriété n'est pas définie. |
Si la valeur de la lineInfoForLine est Greelter ou Equal lineCount , cette information concerne la dernière ligne (c'est-à-dire lineCount - 1).
| PROPRIÉTÉ | Taper | Notes |
|---|---|---|
| DOUBLER | Nombre | Numéro de ligne de ces informations, base 0. Cela peut être inférieur à la ligne lineInfoForLine . |
| Commencer | Nombre | Compense de texte du début de cette ligne. |
| fin | Nombre | Décalage du texte après le dernier caractère visible (donc l'espace blanc n'est pas compté) sur cette ligne. |
| Bas | Nombre | La position verticale du bas de cette ligne, y compris le rembourrage. |
| Largeur | Nombre | Exte horizontal de cette ligne, y compris le principal retrait de la marge, mais à l'exclusion des espaces blancs. Utilisez usePreciseWidth:true pour obtenir une valeur précise pour cette propriété. |
En cas d'erreur, la promesse est rejetée avec un objet étendu avec l'un des codes d'erreur suivants, en tant que chaîne littérale:
| Code | Détails |
|---|---|
| E_Missing_Parameters | measure nécessite un objet avec les paramètres, qui n'ont pas été fournis. |
| E_missing_text | Le texte à mesurer est null ou n'a pas été fourni. |
| E_invalid_font_spec | La spécification de la police n'est pas valide. Il est peu probable que cela se produise sur Android. |
| E_unknown_error | Eh bien ... qui sait? |
//...
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 [ ] >Calculez la hauteur de chacune des cordes dans un tableau.
Ceci est une alternative à measure désignée pour les cas dans lesquels vous avez calculé la hauteur des blocs de texte nombre avec des caractéristiques communes (largeur, police, etc.), un cas d'utilisation typique avec des composants <FlatList> ou <RecyclerListView> .
La mesure utilise le même algorithme que measure mais il ne renvoie que la hauteur de chaque bloc et, en évitant plusieurs étapes à travers le pont, il est plus rapide ... beaucoup plus rapide sur Android!
J'ai fait des tests sur 5 000 blocs de texte aléatoires et ce sont les résultats (MS):
measure | flatHeights | |
|---|---|---|
| Androïde | 49 624 | 1 091 |
| ios | 1 949 | 732 |
À l'avenir, je préparerai un exemple de son utilisation avec Flatlist et plusieurs styles sur la même carte.
Il s'agit d'un objet similaire à celui que vous passez pour measure , mais l'option text est un tableau de chaînes et les options usePreciseWidth et lineInfoForLine sont ignorées.
| PROPRIÉTÉ | Taper | Défaut |
|---|---|---|
| Texte | Chaîne [] | (Aucun) |
| Largeur | Nombre | Infini |
| Fonte | Chaîne | Je dépend |
| Poids de la police | Chaîne | 'normale' |
| S'adapter | Nombre | 14 |
| Fontstyle | Chaîne | 'normale' |
| Policier | Tableau | (Aucun) |
| Autoriser la mise à jour | Booléen | Vrai |
| Placement de lettres | Nombre | (Aucun) |
| Includefontpadding | Booléen | Vrai |
| Textbreakstrategy | Chaîne | 'HighQualy' |
Les résultats sont une promesse qui se résout à un tableau avec la hauteur de chaque bloc (en SP ), dans le même ordre dans lequel les blocs ont été reçus.
Contrairement à la mesure, les éléments null renvoie 0 sans erreur de gène et les chaînes vides renvoient la même hauteur que RN attribue aux composants <Text> null .
//...
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 } >Obtenez des informations de police système pour le système d'exploitation en cours d'exécution.
C'est un wrapper pour l' UIFont.preferredFontForTextStyle iOS
Le résultat est une promesse qui se résout en un objet JS qui dépendent du système d'exploitation, mais ses valeurs sont à leur tour des objets entièrement compatibles avec les styles RN, de sorte qu'il peut être utilisé pour styliser <Text> ou <TextInput> Composants:
| PROPRIÉTÉ | Taper | Notes |
|---|---|---|
| Fonte | Chaîne | Nom de la famille du système ou visage de police. |
| S'adapter | Nombre | Taille de la police en SP (non à l'échelle). |
| Fontstyle | Tsfontstyle | Seulement si «italique», indéfini si le style est «normal». |
| Poids de la police | Tsfontweight | Seulement si «gras», non défini si le poids est «normal». |
| Policier | Tsfontvariant [] ou null | iOS seulement . Actuellement, aucun style ne comprend cette propriété. |
| Placement de lettres | Nombre | Omis si elle fonctionnait sur Android avec un amateur de RN que 0,55 |
Pour connaître les noms de clés, veuillez consulter les clés de SpecsFortTextStyles dans le wiki.
Je n'ai pas essayé de normaliser les clés du résultat parce que, à l'exception de deux ou trois, ils ont une interprétation différente dans chaque système d'exploitation, mais vous pouvez les utiliser pour créer des styles de douane en fonction de vos besoins.
fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >Renvoie les caractéristiques de la police obtenues à partir des spécifications données.
Ce paramètre est un sous-ensemble de TSMeasureParams , donc les détails sont omis ici.
| PROPRIÉTÉ | Taper | Défaut |
|---|---|---|
| Fonte | Chaîne | IOS: «San Francisco», Android: «Roboto» |
| Poids de la police | Chaîne | 'normale' |
| S'adapter | Nombre | 14 |
| Fontstyle | Chaîne | 'normale' |
| Policier | Chaîne [] | (Aucun) |
| Placement de lettres | Nombre | 0 |
fontFromSpecs utilise un implicite allowsFontScaling:true et, comme il ne s'agit pas d'une fonction de mesure, includeFontPadding vous n'avez pas le sens.
Les résultats sont une promesse qui se résout en un objet JS avec des informations pour la police et la taille données, les unités en SP en Android ou les points dans iOS, en utilisant des nombres de points flottants où l'application *.
| PROPRIÉTÉ | Taper | Détails |
|---|---|---|
| Fonte | Chaîne | Dans Android, c'est la même chaîne passée que le paramètre. |
| Prodigue | Chaîne | IOS uniquement , toujours undefined dans Android. |
| S'adapter | Nombre | Il peut être différent du paramètre donné si le paramètre comprend des décimales. |
| Fontstyle | Chaîne | «Normal» ou «italique». |
| Poids de la police | Chaîne | «Normal» ou «Bold», sur iOS peut passer de «100» à «900». |
| Policier | Chaîne [] | IOS uniquement , toujours undefined dans Android. |
| monter | Nombre | La distance recommandée au-dessus de la ligne de base pour le texte espacé en simple. |
| descendre | Nombre | La distance recommandée sous la ligne de base pour le texte espacé en simple. |
| Capheight | Nombre | IOS uniquement la hauteur des personnages de capital. |
| Xheight | Nombre | IOS seulement hauteur de minuscules "x". |
| haut | Nombre | Android uniquement . Distance maximale au-dessus de la ligne de base pour le glyphe des Talles dans la police. |
| Bas | Nombre | Android uniquement . Distance maximale en dessous de la ligne de base pour le glyphe le plus bas de la police. |
| Menant | Nombre | L'espace additionnel recommandé à ajouter entre les lignes de texte. |
| Lineheight | Nombre | La hauteur de ligne recommandée. Il doit être plus grand si le texte contienne des symboles Unicode, tels que les emojis. |
| _Hacher | Nombre | Le code de hachage peut être utile pour le débogage. |
* L'utilisation de flotteurs est plus précise que les entiers et vous permet d'utiliser votre méthode d'arrondissement de préférence, mais pas plus de 5 chiffres de précision dans ces valeurs. Rappelez-vous également que RN ne fonctionne pas avec les sous-pixels dans Android et tronquera ces valeurs.
Voir plus dans:
Comprendre la typographie sur le site Google Material Design.
À propos de la manipulation du texte dans iOS pour iOS.
fontFamilyNames ( ) : Promise < string [ ] >Renvoie une promesse pour un éventail de noms de famille de polices disponibles sur le système.
Sur iOS, vous utilisez la méthode UIFont.familyNames de l'Uikit.
Sur Android, le résultat est codé dur pour les polices système et complétez dynamiquement les polices installées par votre application, le cas échéant.
Voir à propos des polices Android et des polices personnalisées dans le wiki pour en savoir plus sur cette liste.
fontNamesForFamilyName ( fontFamily : string ) : Promise < string [ ] > Wrapper pour la méthode UIFont.fontNamesForFamilyName d'Uikit, renvoie un tableau de noms de police disponibles dans une famille de polices particulière.
Vous pouvez utiliser la fonction fontFamilyNames de RnTextSize pour obtenir un tableau des noms de famille de polices disponibles sur le système.
Ceci est une fonction iOS uniquement , sur Android, il se résout toujours de null .
Dans iOS, la largeur qui en résulte des deux, measure et flatHeights , comprend les espaces blancs principaux tandis que dans Android, ceux-ci sont jetés.
Sur iOS, RN prend en compte la position absolue à l'écran pour calculer les dimensions. RNTextSize ne peut pas faire cela et les deux, la largeur et la hauteur, peuvent avoir une différence allant jusqu'à 1 pixel (pas le point).
RN ne prend pas en charge les tailles de type dynamique, mais fait un excellent travail en imitant cette fonctionnalité Autorisation allowFontScaling ... EXCEP pour letterSpacing qui n'est pas mise à l'échelle.
J'espère qu'une future version de RN résout ce problème.
Bien que RNTextSize fournit la lineHeight résultant en fonctions de somme, il ne le prend pas en charge comme paramètre parce que vous utilisez un algorithme non standard pour le définir. Je vous recommande de ne pas utiliser lineHeight à moins qu'il ne soit strictement dans le besoin, mais si vous l'utilisez, essayez de le faire 30% ou plus que la taille de la police, ou utilisez la méthode RNTextSize fontFromSpecs si vous voulez plus de précision.
Composants <Text> imbriqués (ou avec des images à l'intérieur)
Je suis un développeur complet avec plus de 20 ans d'expérience et j'essaie de partager la majeure partie de mon travail gratuitement et d'aider les autres, mais cela prend beaucoup de temps et d'efforts donc, si vous aimez mon travail, veuillez considérer ...
Bien sûr, les commentaires, les RP et les étoiles sont également les bienvenus?
Merci pour votre soutien!
La licence BSD 2 clause "simplifiée".
© 2018-2019, Alberto Martínez. Tous droits réservés.
