Échelle de police React Native

Question

J'ai un problème avec la mise à l'échelle de la police à l'intérieur de la vue ou mieux de dire à l'intérieur du composant Texte dans React Native pour Android . Le problème est que je veux que le texte à l'intérieur du composant Texte soit automatiquement mis à l'échelle en fonction de la longueur de la chaîne (si le texte peut tenir à l'intérieur de la vue avec la taille de police souhaitée, ne rien faire et si la chaîne est trop longue pour cette taille de police, définir une taille de police plus petite).

Par exemple :

1.

<View style={{flexDirection: 'row'}}> <Text numberOfLines={1} style={{fontSize: 20}}>This is in one row.</Text> </View>

Dans ce cas (1.), le texte serait rendu sur une ligne avec une taille de police de 22.

2.

<View style={{flexDirection: 'row'}}> <Text numberOfLines={1} style={{fontSize: 20}}>This is in one row and much longer text inside of Text component.</Text> </View>

Dans le deuxième scénario (2.), le texte serait rendu sur une seule ligne avec ... à la fin et également avec une taille de police de 20. Mais je veux que la police soit automatiquement réduite si le contenu ne tient pas sur une ligne du composant Texte.

J'ai cherché une solution et j'ai trouvé que pour iOS vous pouvez facilement résoudre ce problème avec des attributs à l'intérieur du texte comme suit :

<Text adjustsFontSizeToFit minimumFontScale={.4}>Automatically font scale</Text>

Cela ne fonctionne pas pour Android donc j'ai vraiment besoin d'aide :/

Si quelqu'un sait comment faire pour que la police change automatiquement de taille pour s'adapter à l'intérieur du texte en une seule ligne, je lui en serais très reconnaissant.

Merci d'avance !

Answer 1

Si vous connaissez la largeur maximale du texte et sa longueur en caractères, vous pouvez calculer la taille de police qui conviendra. Quelque chose comme textWidth / textLength = fontWidth . Cependant, il est très peu probable que la fontWidth (la largeur disponible pour chaque caractère) soit exactement la même que la fontSize correspondante. Mais si vous trouvez le caractère le plus large de votre police, et si vous trouvez la corrélation entre sa largeur et la fontSize, vous pouvez calculer la fontSize par le biais de fontSize / fontWidth = c . Par conséquent, la largeur sera toujours plus petite que le maximum.

Par exemple, j'ai constaté que pour la police Roboto Light, une fontSize de 30 donne une largeur de 28,8px pour le m, le caractère le plus large dans ce cas. Ainsi, la fontSize est 30/28,8 fois plus grande que la largeur réelle. Nous pouvons donc la calculer comme suit textWidth / textLength = fontSize / (30 / 28,8)

Cette valeur peut être ajustée si vous avez un espacement supplémentaire dans vos caractères, et si vous voulez une taille de police minimale, vous pouvez utiliser la fonction Math.max(updatedFontSize, minimumFontSize)

Answer 2

Le problème est que vous devez spécifier la largeur de votre élément Text. Jetez un coup d'œil à la lien .