Comment définir une famille de fonts par défaut dans React Native?

Y a-t-il un équivalent à ce CSS dans React Native, de sorte que l’application utilise la même police partout?

body { font-family: 'Open Sans'; } 

L’application manuelle sur chaque nœud Text semble trop compliqué.

La méthode recommandée consiste à créer votre propre composant, tel que MyAppText. MyAppText serait un composant simple qui rend un composant Text utilisant votre style universel et peut passer par d’autres accessoires, etc.

https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance

Récemment, un module de noeud a été créé pour résoudre ce problème. Vous n’avez donc pas besoin de créer un autre composant .

https://github.com/Ajackster/react-native-global-props

https://www.npmjs.com/package/react-native-global-props

La documentation indique que, dans votre composant le plus élevé, importez la fonction setCustomText comme cela.

 import { setCustomText } from 'react-native-global-props'; 

Ensuite, créez les styles / accessoires personnalisés que vous voulez pour le composant Text réactif. Dans votre cas, vous souhaitez que fontFamily fonctionne sur tous les composants Text .

 const customTextProps = { style: { fontFamily: yourFont } } 

Appelez la fonction setCustomText et transmettez vos accessoires / styles à la fonction.

 setCustomText(customTextProps); 

Et ensuite, tous les composants Text auront votre fontFamily déclarée avec tous les autres accessoires / styles que vous fournissez.

Ajoutez Text.defaultProps.style = { fontFamily: 'some-font' } dans le constructeur du fichier App.js (ou tout composant racine que vous avez).

Vous pouvez remplacer le comportement du texte en l’ajoutant à l’un de vos composants à l’aide de Text:

 let oldRender = Text.prototype.render; Text.prototype.render = function (...args) { let origin = oldRender.call(this, ...args); return React.cloneElement(origin, { style: [origin.props.style, {color: 'red', fontFamily: 'Arial'}] }); }; 

Edit: depuis React Native 0.56, Text.prototype ne fonctionne plus. Vous devez supprimer le .prototype :

 let oldRender = Text.render; Text.render = function (...args) { let origin = oldRender.call(this, ...args); return React.cloneElement(origin, { style: [origin.props.style, {color: 'red', fontFamily: 'Arial'}] }); }; 

Ajoutez cette fonction à votre composant racine, puis exécutez-la à partir de votre constructeur après avoir ajouté votre police à l’aide de ces instructions. https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

 import {Text, TextInput} from 'react-native' SetDefaultFontFamily = () => { let components = [Text, TextInput] const customProps = { style: { fontFamily: "Rubik" } } for(let i = 0; i < components.length; i++) { const TextRender = components[i].prototype.render; const initialDefaultProps = components[i].prototype.constructor.defaultProps; components[i].prototype.constructor.defaultProps = { ...initialDefaultProps, ...customProps, } components[i].prototype.render = function render() { let oldProps = this.props; this.props = { ...this.props, style: [customProps.style, this.props.style] }; try { return TextRender.apply(this, arguments); } finally { this.props = oldProps; } }; } } 

Avec React-Native 0.56, la méthode ci-dessus de modification de Text.prototype.render ne fonctionne plus, vous devez donc utiliser votre propre composant, ce qui peut être fait en une seule ligne!

MyText.js

 export default props => {props.children} 

AnotherComponent.js

 import Text from './MyText'; ... This will show in default font. ... 

Super tard pour ce fil mais voilà.

TLDR; Ajoutez le bloc suivant dans votre AppDelegate.m

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { .... // HERE: replace "Verlag" with your font [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]]; .... } 

Visite de tout le stream.

Vous pouvez le faire de différentes manières, en dehors de l’utilisation d’un plug-in tel que react-native-global-props manière à vous guider pas à pas.

Ajout de fonts aux plates-formes.

Comment append la police au projet IOS

Commençons par créer un emplacement pour nos actifs. Faisons le répertoire suivant à notre racine.

“ `

 ios/ static/ fonts/ 

“ `

Ajoutons maintenant un NPM “React Native” dans notre package.json

  "rnpm": { "static": [ "./static/fonts/" ] } 

Maintenant, nous pouvons lancer un “lien natif” pour append nos atouts à nos applications natives.

Vérifier ou faire manuellement.

Cela devrait append vos noms de police dans le .plist du projet (pour les utilisateurs de code VS, exécutez le code ios/*/Info.plist pour confirmer)

Supposons que Verlag est la police que vous avez ajoutée, elle devrait ressembler à ceci:

    ..... UIAppFonts  Verlag Bold Italic.otf Verlag Book Italic.otf Verlag Light.otf Verlag XLight Italic.otf Verlag XLight.otf Verlag-Black.otf Verlag-BlackItalic.otf Verlag-Bold.otf Verlag-Book.otf Verlag-LightItalic.otf  ....   

Maintenant que vous les avez mappés, faisons en sorte qu’ils soient effectivement présents et chargés (c’est aussi comme ça que vous le feriez manuellement).

Allez dans "Build Phase" > "Copy Bundler Resource" , si cela n’a pas fonctionné, vous allez append un élément manuellement ici.

1_uuz0__3kx2vvguz37bhvya

Obtenir des noms de police (reconnus par XCode)

Ouvrez d’abord vos journaux XCode, comme:

XXXX

Ensuite, vous pouvez append le bloc suivant dans votre AppDelegate.m pour enregistrer les noms des fonts et de la famille de fonts.

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ..... for (NSSsortingng* family in [UIFont familyNames]) { NSLog(@"%@", family); for (NSSsortingng* name in [UIFont fontNamesForFamilyName: family]) { NSLog(@" %@", name); } } ... } 

Une fois que vous avez exécuté, vous devriez trouver vos fonts si elles sont chargées correctement, ici nous avons trouvé les nôtres dans des journaux comme ceci:

 2018-05-07 10:57:04.194127-0700 MyApp[84024:1486266] Verlag 2018-05-07 10:57:04.194266-0700 MyApp[84024:1486266] Verlag-Book 2018-05-07 10:57:04.194401-0700 MyApp[84024:1486266] Verlag-BlackItalic 2018-05-07 10:57:04.194516-0700 MyApp[84024:1486266] Verlag-BoldItalic 2018-05-07 10:57:04.194616-0700 MyApp[84024:1486266] Verlag-XLight 2018-05-07 10:57:04.194737-0700 MyApp[84024:1486266] Verlag-Bold 2018-05-07 10:57:04.194833-0700 MyApp[84024:1486266] Verlag-Black 2018-05-07 10:57:04.194942-0700 MyApp[84024:1486266] Verlag-XLightItalic 2018-05-07 10:57:04.195170-0700 MyApp[84024:1486266] Verlag-LightItalic 2018-05-07 10:57:04.195327-0700 MyApp[84024:1486266] Verlag-BookItalic 2018-05-07 10:57:04.195510-0700 MyApp[84024:1486266] Verlag-Light 

Alors maintenant, nous soaps qu’il a chargé la famille Verlag et sont les fonts à l’intérieur de cette famille

  • Verlag-Book
  • Verlag-BlackItalic
  • Verlag-BoldItalic
  • Verlag-XLight
  • Verlag-Bold
  • Verlag-Black
  • Verlag-XLightItalic
  • Verlag-LightItalic
  • Verlag-BookItalic
  • Verlag-Light

Ce sont maintenant les noms sensibles à la casse que nous pouvons utiliser dans notre famille de fonts que nous pouvons utiliser dans notre application native de réaction.

Got -’em maintenant défini la police par défaut.

Ensuite, pour définir une police par défaut pour append votre nom de famille de police dans votre AppDelegate.m avec cette ligne

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { .... // ADD THIS LINE (replace "Verlag" with your font) [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]]; .... } 

Terminé.