web-dev-qa-db-fra.com

Comment définir la famille de polices par défaut dans React Native?

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

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

L’appliquer manuellement sur chaque nœud de texte semble trop compliqué.

react-native
66
Dagobert Renouf

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

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

45
David E. Chen

Récemment, un module de nœud a été créé pour résoudre ce problème et vous ne devez pas 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 d'ordre le plus élevé, importez la fonction setCustomText de cette manière.

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

Créez ensuite le style/les accessoires personnalisés de votre choix pour le composant rea-native Text. Dans votre cas, vous voudriez que fontFamily fonctionne sur tous les composants Text.

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

Appelez la fonction setCustomText et transmettez-lui vos accessoires/styles.

setCustomText(customTextProps);

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

53
Ajackster

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

21
A-J-A

Vous pouvez remplacer le comportement du texte en l'ajoutant à n'importe lequel de vos composants à l'aide de Texte:

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

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: [{color: 'red', fontFamily: 'Arial'}, Origin.props.style]
    });
};
17
Floris M

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 effectué sur une seule ligne!

MyText.js

export default props => <Text {...props} style={[{fontFamily: 'Helvetica'}, props.style]}>{props.children}</Text>

AnotherComponent.js

import Text from './MyText';

...
<Text>This will show in default font.</Text>
...
14
Bap

Ajoutez cette fonction à votre composant racine App, 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;
            }
        };
    }
}
10
Rob

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]];
  ....
}

Procédure pas à pas du flux entier.

Quelques manières de le faire en dehors d’un plugin tel que react-native-global-props afin que je puisse vous guider pas à pas.

Ajout de polices aux plates-formes.

Comment ajouter 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/"
    ]
  }

Nous pouvons maintenant exécuter le "lien natif de réaction" pour ajouter nos ressources à nos applications natives.

Vérifier ou faire manuellement.

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

Ici supposons que Verlag soit la police que vous avez ajoutée, elle devrait ressembler à ceci:

     <dict>
   <plist>
      .....
      <key>UIAppFonts</key>
      <array>
         <string>Verlag Bold Italic.otf</string>
         <string>Verlag Book Italic.otf</string>
         <string>Verlag Light.otf</string>
         <string>Verlag XLight Italic.otf</string>
         <string>Verlag XLight.otf</string>
         <string>Verlag-Black.otf</string>
         <string>Verlag-BlackItalic.otf</string>
         <string>Verlag-Bold.otf</string>
         <string>Verlag-Book.otf</string>
         <string>Verlag-LightItalic.otf</string>
      </array>
      ....    
</dict>
</plist>

Maintenant que vous les avez cartographiées, assurez-vous qu’elles sont réellement présentes et chargées (c’est également ce que vous feriez manuellement).

Allez à "Build Phase" > "Copy Bundler Resource", si cela ne fonctionne pas, vous pouvez les ajouter manuellement ici.

1_uuz0__3kx2vvguz37bhvya

Obtenir les noms de police (reconnus par XCode)

Commencez par ouvrir vos journaux XCode, comme suit:

XXXX

Ensuite, vous pouvez ajouter le bloc suivant dans votre AppDelegate.m pour consigner les noms des polices et de la famille de polices.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    .....


  for (NSString* family in [UIFont familyNames])
  {
    NSLog(@"%@", family);
    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
      NSLog(@" %@", name);
    }
  }

  ...
}

Une fois que vous avez exécuté, vous devriez trouver vos polices si elles sont chargées correctement. Nous avons trouvé ici les nôtres dans des journaux comme celui-ci:

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 savons qu'il a chargé la famille Verlag et que sont les polices à 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 désormais les noms sensibles à la casse que nous pouvons utiliser dans notre famille de polices que nous pouvons utiliser dans notre application native rea.

Got -'em maintenant définir la police par défaut.

Puis pour définir une police par défaut pour ajouter 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é.

1
garrettmac

Cela fonctionne pour moi: Ajouter une police personnalisée dans React Native

téléchargez vos polices et placez-les dans le dossier assets/fonts, ajoutez cette ligne dans package.json

 "rnpm": {
"assets": ["assets/fonts/Sarpanch"]}

puis ouvrez terminal et exécutez cette commande: lien de réaction natif

Maintenant, vous êtes prêt à partir. Pour l'étape plus détaillée. visitez le lien mentionné ci-dessus

0
Khushboo Tahir