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

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

Son application manuelle sur chaque nœud de texte semble trop compliquée.

La méthode recommandée consiste à créer votre propre composant, tel que MyAppText. MyAppText serait un composant simple qui restitue un composant de texte 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

Il y a eu récemment un module de nœud qui a été créé qui résout ce problème afin que vous n'ayez 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 setCustomTextfonction comme ceci.

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

Ensuite, créez le style / accessoires personnalisés que vous souhaitez pour le Textcomposant natif de réaction . Dans votre cas, vous aimeriez que fontFamily travaille sur chaque Textcomposant.

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

Appelez la setCustomTextfonction et passez vos accessoires / styles dans la fonction.

setCustomText(customTextProps);

Et puis tous les Textcomposants natifs de réaction auront votre fontFamily déclarée avec tous les autres accessoires / styles que vous fournissez.

Pour React Native 0.56.0+, vérifiez si defaultProps est défini en premier:

Text.defaultProps = Text.defaultProps || {}

Puis ajouter:

Text.defaultProps.style =  { fontFamily: 'some_font' }

Ajoutez ce qui précède dans le constructeur du fichier App.js (ou de tout composant racine que vous avez).

Afin de remplacer le style, vous pouvez créer un objet de style et le diffuser puis ajouter votre style supplémentaire (par exemple { ...baseStyle, fontSize: 16 })

Vous pouvez remplacer le comportement du texte en l'ajoutant dans 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: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

Edit: depuis React Native 0.56, Text.prototypene fonctionne plus. Vous devez supprimer .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]
    });
};

Ajouter

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

dans package.json puis courirreact-native link

Avec React-Native 0.56, la méthode de changement ci-dessus Text.prototype.renderne fonctionne plus, vous devez donc utiliser votre propre composant, ce qui peut être fait en 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>
...

Ajoutez cette fonction à votre Appcomposant racine , puis exécutez-la à partir de votre constructeur après avoir ajouté votre police en suivant 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;
            }
        };
    }
}

Super tard dans ce fil mais voilà.

TLDR; Ajoutez le bloc suivant dans votreAppDelegate.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 de tout le flux.

Quelques façons de le faire en dehors de l'utilisation d'un plugin comme react-native-global-propsje vais vous guider étape par étape.

Ajout de polices aux plates-formes.

Comment ajouter la police au projet IOS

Commençons par créer un emplacement pour nos actifs. Créons 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 un "lien de réaction natif" pour ajouter nos ressources à nos applications natives.

Vérification ou exécution manuelle.

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

Supposons ici que Verlagla police que vous avez ajoutée ressemble à 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 mappés, nous allons maintenant nous assurer qu'ils sont réellement là et en cours de chargement (c'est aussi comment vous le feriez manuellement).

Allez dans "Build Phase" > "Copy Bundler Resource", si cela n'a pas fonctionné, vous les ajouterez manuellement ici.

Obtenir les noms de polices (reconnus par XCode)

Ouvrez d'abord vos journaux XCode, comme:

Ensuite, vous pouvez ajouter le bloc suivant dans votre AppDelegate.mpour enregistrer 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, ici nous avons trouvé 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 Verlagfamille et 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 maintenant les noms sensibles à la casse que nous pouvons utiliser dans notre famille de polices que nous pouvons utiliser dans notre application native react.

Vous avez maintenant défini la police par défaut.

Ensuite, pour définir une police par défaut pour ajouter le nom de votre famille de polices dans votre AppDelegate.mavec 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é.

Défini dans package.json

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

Et lien lien natif de réaction

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 le terminal et exécutez cette commande: react-native link

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