web-dev-qa-db-fra.com

ajuste la taille de la police pour correspondre à la vue dans réagit natif - android

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?

androidreactjsreact-native
5
Taha

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)

6
ِAllloush

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
0
Walter Monecke

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
}
})
0
Devansh sadhotra