web-dev-qa-db-fra.com

Famille de police Roboto light and bold in react native

J’apporte quelques modifications au texte dans mon application native react: je dois spécifier Roboto light pour les paragraphes et Roboto Bold pour les titres. Je dois avoir la même apparence du texte dans les applications iOS et Android: je dois donc le faire fonctionner pour les deux J'ai essayé cette ligne de code.

text : { fontFamily: 'sans-serif-light' },

mais je reçois cette erreur:  enter image description here

J'ai essayé ce type de la documentation officielle et ça fonctionne bien 

title : { fontFamily: 'Cochin' },

-> Je pense donc que le problème vient de la famille de polices Roboto elle-même. Toute aide? 

textfontsreact-nativefont-familyroboto
5
user3521011

Pour ajouter des polices personnalisées à votre application, stockez tous vos fichiers ttf dans un répertoire . Ajoutez le code suivant à votre fichier package.json. 

"rnpm": { "assets": [ "./fonts" // yours fonts directory ] }

Puis exécutez react-native link Pour utiliser la police, utilisez le même nom sur le fichier ttf dans fontFamily.

9
Roman Akash

sans-serif-light et Roboto sont des polices uniquement Android. Vous avez besoin de différentes polices pour iOS. Ce référentiel contient une liste des polices disponibles pour iOS et Android - https://github.com/react-native-training/react-native-fonts

Vous pouvez utiliser Platform.select() pour cibler différentes polices pour chaque système d'exploitation:

title: {
  ...Platform.select({
       ios: { fontFamily: 'Arial', }, 
       Android: { fontFamily: 'Roboto' }
  })
}
6
RRikesh

Si cela peut aider, j'ai eu un problème similaire. L’utilisation de «lien natif» a effectivement référencé les polices dans «Phases de construction> Copier la ressource en bundle», mais cela n’ajoute rien au fichier Info.plist.

L'ajout de polices dans Info.plist a résolu le problème.

<key>UIAppFonts</key>
<array>
    <string>Roboto-Black.ttf</string>
</array>
1
Benoit