Comment faire pour que la taille de la police du texte change automatiquement dans une vue en mode natif?
J'ai un texte de différentes longueurs, dont certaines ne correspondent pas à la vue, ce qui a diminué la taille de la police. J'ai vérifié la documentation et trouvé ceci
https://facebook.github.io/react-native/docs/text.html#adjustsfontsizetofit
mais c'est pour IOS seulement et j'en ai besoin pour Android . Et est-ce que ça fonctionne avec d'autres composants comme les boutons et le toucher?
Essayez cette approche. Envisagez de définir la taille de la police en fonction de la largeur de l'écran comme suit
width: Dimensions.get('window').width
Dans votre style, essayez donc de calculer un pourcentage pour que la taille de la police corresponde à celle de l'écran.
style={
text:{
fontSize:0.05*width
}
}
ça va marcher pour tous les écrans (Android et IOS)
Je pense que la meilleure façon de le faire est d'utiliser les accessoires intégrés du composant Text
comme suit:
<Text adjustsFontSizeToFit minimumFontScale={.5}>Hello World</Text>
Utilisez ces trois accessoires ensemble pour obtenir les meilleurs résultats:
adjustsFontSizeToFit
minimumFontScale={.5} // or any other value you prefer between 0 and 1
allowFontScaling
Cependant, vous devriezPASutiliser certains styles lorsque vous utilisez les accessoires que je viens de mentionner, comme par exemple:
fontSize,
height,
width,
flex,
margin
Le meilleur moyen d'implémenter la taille de police basée sur la résolution est d'utiliser Pixel Ratio. J'ai appliqué cette approche dans l'ensemble de mon application . Moins de pixels signifie une résolution moindre, plus le ratio de pixels est élevé, plus la résolution est élevée.
PixelRatio.get () === 1 appareils Android mdpi (160 dpi)
PixelRatio.get () === 1.5 appareils Android hdpi (240 dpi)
PixelRatio.get () === 2 iPhone 4, 4S iPhone 5, 5c, 5s iPhone 6 xhdpi Appareils Android (320 dpi)
PixelRatio.get () === 3 appareils Android iPhone 6 plus xxhdpi (480 dpi)
PixelRatio.get () === 3.5 Nexus 6
Le code ci-dessous est de la feuille de style et vous pouvez utiliser les classes de votre code JSX
import { StyleSheet, PixelRatio } from 'react-native'
import { Colors } from '../../Themes/'
const FONT_SIZE = 12;
FONT_SIZE_Requests = 12;
if ((PixelRatio.get() <= 1.5) &&(PixelRatio.get() > 1)) {
FONT_SIZE = 9;
FONT_SIZE_Requests = 9;
} else if (PixelRatio.get() <=1) {
FONT_SIZE = 9;
FONT_SIZE_Requests=9;
} else if ((PixelRatio.get() > 1.5) &&( PixelRatio.get() >= 2) && (PixelRatio.get() < 3)) {
FONT_SIZE = 10;
FONT_SIZE_Requests = 10;
} else if (PixelRatio.get() >= 3) {
FONT_SIZE = 11;
FONT_SIZE_Requests = 11;
}
export default StyleSheet.create({
header: {
backgroundColor: Colors.ClayColor
},
transparentHeader: {
backgroundColor: "#ffffff",
elevation: 0
},
labelStyle:{
margin:0,
fontFamily:'roboto_medium',
fontSize:FONT_SIZE
},
labelStyleRequests:{
margin:0,
fontFamily:'roboto_medium',
fontSize:FONT_SIZE_Requests
}
})