Comment définir la police par défaut de la famille à Réagir Natif?

Est-il un équivalent à cette CSS à Réagir Natif, de sorte que l'application utilise la même police partout ?

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

De l'appliquer manuellement sur chaque nœud de Texte semble trop compliqué.

  • Toute Réponse Parfaite à Cette Question ??? Je ne veux pas l'appeler tous les styles.texte ou quelque chose comme ça .
InformationsquelleAutor Dagobert Renouf | 2016-02-07
  1. 45

    Il est recommandé de créer vos propres composants, tels que les MyAppText. MyAppText serait un simple composant qui rend un composant de Texte à l'aide de votre style universel et peut passer à travers d'autres accessoires, etc.

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

    • Merci c'est exactement ce dont j'avais besoin. Me semble que je n'ai pas saisir l'approche par composants assez profondément encore 🙂
    • Une chose qui n'est pas super clair à partir de la documentation est de savoir comment passer à travers les propriétés de votre composante et à l'égard des styles sur votre composant. Vous pouvez le faire comme ceci: gist.github.com/neilsarkar/c9b5fc7e67bbbe4c407eec17deb7311e
    InformationsquelleAutor David E. Chen
  2. 53

    Il y avait récemment un nœud module qui a été faite qui permet de résoudre ce problème afin que vous ne pas ont pour 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 plus grande composante de l'ordre, de l'importation de la setCustomText fonction de la façon.

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

    Ensuite, créez le style personnalisé/les accessoires que vous souhaitez pour réagir indigènes Text composant. Dans votre cas, vous aimeriez fontFamily de travailler sur tous les Text composant.

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

    Appeler le setCustomText fonction et passer vos accessoires/styles dans la fonction.

    setCustomText(customTextProps);

    Et puis tous réagir indigènes Text les composants ont déclarée fontFamily avec tous les autres accessoires/styles que vous fournissez.

    • Le idiomatiques de la méthode à utiliser un composant de la composition semble être un meilleur choix, même si c'est un cool hack.
    • Lorsque le composant de Texte ne prend pas en charge la modification des polices par défaut de la boîte, cette solution devient beaucoup mieux. Je préfère ajouter un contrôle global en un seul endroit et utiliser les composants natifs que de faire un composant wrapper pour tous les détails que la vraie applications natives fournir.
    • J'ai hésité entre au-dessus de 2 solutions, en fait, je déteste pour installer des plugins non officiels cause réagir natif lui-même continue à changer, mais finalement je choisis ce que ça peut me faire gagner énormément de temps. Merci!
    • J'ai DONC besoin d'appeler <Text style={styles.text}> ?? Ce n'est pas une solution parfaite, comme c'est body {font-family: 'Open Sans';} ont tout mettre à jour la solution ??
    • Non, vous n'avez pas besoin de faire Text style={styles.text}>. Vous avez juste besoin de déclarer votre personnalisé accessoires quelque part dans votre application et il sera appliqué à l'ensemble de vos composants de Texte. C'est très similaire à body {font-family: ....}
    • Cela est d'or, mais comment cela peut-il être fait dans RN Expo de projet?
    • OMI réagir-native-mondial-des accessoires est de moins d'un hack, que l'enchaînement de tous les composants et d'avoir à maintenir ces wrappers. Merci @Ajackster pour le partage de votre très utile de la bibliothèque.
    • Il ne fonctionne pas à réagir natif de 0,57 🙁

    InformationsquelleAutor Ajackster
  3. 21

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

    • Peut-être que le defaultProps n'existait pas lorsque toutes les autres réponses ont été écrites, mais cela semble être la façon de le faire maintenant.
    • Malheureusement, cela ne fonctionnera pas si nous remplacer style prop, disons, pour ajuster les styles de particulier Text composants
    • Vrai, mais vous pouvez contourner ce problème , créez le bon style, comme un objet, et si jamais vous voulez une police personnalisée juste passer au composant d'un tableau qui contient cet objet + yourNewStyleObject @Amerzilla
    • merci! Il va travailler, mais ajoute petit généraux 🙂
    • J'ai trouvé que je peux utiliser spread operator de combiner des styles de texte et d'éviter de créer des tableaux dans render js textStyle: { ...baseStyle, fontSize: 16 }
    • Ouais ça pourrait avoir l'air plus propre bon @Amerzilla
    • Il y a un problème là. Si quelqu'un puis de définir l' style prop dans le Texte, la police par défaut va être remplacé.

    InformationsquelleAutor A-J-A
  4. 17

    Vous pouvez remplacer le Texte comportement en ajoutant ceci dans n'importe quel de votre composant à l'aide du 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 Réagir Natif de 0,56, Text.prototypene fonctionne plus. Vous devez supprimer les .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]
    });
};
    • C'est une excellente solution, mais vous devez modifier: [d'origine.accessoires de jeu.style, {color: "red", fontFamily: 'Arial'}] ->[{color: "red", fontFamily: 'Arial'}, origine.accessoires de jeu.style] Sinon, vous devrez remplacer le style personnalisé programmés dans le composant
    • Le mieux fonctionné. Texte.le prototype.le rendu ne fonctionne plus, le Texte.le rendu n' !
    • comment éviter les icônes hériter de la même?
    • Je suis d'accord avec @IaconisSimone Meilleure approche pour définir fontFamily et pour être sûr de ne pas remplacer des styles personnalisés
    InformationsquelleAutor Floris M
  5. 14

    Avec Réagissent-Natif de 0,56, la méthode ci-dessus de changer Text.prototype.render ne fonctionne plus, donc vous devez 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>
...
    InformationsquelleAutor Bap
  6. 10

    Ajouter cette fonction à la racine de votre App composant et puis l'exécuter à partir de votre constructeur après l'ajout de votre police de caractères à 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;
            }
        };
    }
}
    • C'est exactement ce que je cherchais, ne voulait pas installer quoi que ce soit de plus.
    • Si mon App.js se compose principalement de const App = StackNavigator({...}) et export default App exactement où devrais-je placer ce code que je ne pense pas que je peux utiliser un constructeur ici?
    • J'ai ajouté à ma propre question ici: stackoverflow.com/questions/50081042/...
    • Pourquoi constructeur sur componentDidMount?
    InformationsquelleAutor Rob
  7. 1

    Super en retard à ce fil, mais voilà.

    TLDR; Ajouter 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 de l'ensemble des flux.

    Quelques façons dont vous pouvez faire cela en dehors de l'aide d'un plugin comme react-native-global-props Mal de marche, vous bien que, étape par étape.

    Ajout de polices à des plates-formes.

    Comment ajouter de la police pour IOS de projet

    Créons d'abord un emplacement pour nos actifs.
    Faisons le répertoire suivant à la racine de notre.

    ``

    ios/
static/
       fonts/

    ``

    Maintenant, nous allons ajouter un "Réagir Natif" NPM dans notre package.json

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

    Nous pouvons maintenant lancer "réagir indigènes lien" ajouter nos actifs de nos applications natives.

    De vérifier ou de le faire manuellement.

    Qui devrait ajouter vos noms de police dans le cadre des projets .plist
    (pour VS code aux utilisateurs d'exécuter des code ios/*/Info.plist à confirmer)

    Ici supposons Verlag est la police que vous avez ajouté, il devrait ressembler à quelque chose comme 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 avez mappé, maintenant, assurez-vous qu'ils sont réellement et d'être chargée (c'est aussi comment vous pouvez le faire manuellement).

    Aller à "Build Phase" > "Copy Bundler Resource", Si ça ne fonctionne pas, vous aurez un ajouter manuellement des sous ici.

    Comment définir la police par défaut de la famille à Réagir Natif?

    Obtenir les Noms de Police (reconnu par XCode)

    D'abord ouvrir votre XCode journaux, comme:

    Comment définir la police par défaut de la famille à Réagir Natif?

    Vous pouvez ensuite 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 exécutez, vous devriez trouver des polices si chargé correctement, ici, nous avons trouvé la nôtre dans les 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 savons qu'il a chargé les Verlag de la famille et les polices sont à 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 la casse des noms que nous pouvons utiliser dans notre famille de polices que nous pouvons utiliser dans notre réagir application native.

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

    Puis à définir une police par défaut pour ajouter votre nom de famille de polices 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]];
  ....
}

    Fait.

    • La meilleure approche, mais ne fonctionne pas, tout ce qui est lié à la dernière mise à jour de la RN 0.57?
    InformationsquelleAutor garrettmac
  8. 0

    Qui fonctionne pour moi:
    Ajouter des Polices Personnalisées à Réagir Natif

    télécharger vos polices de caractères et de les placer dans des actifs/dossier de polices, ajouter cette ligne dans le paquet.json 

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

    puis ouvrir un terminal et exécutez cette commande: réagir indigènes lien

    Maintenant, vous êtes bon pour aller. Pour de plus amples étape. visitez le lien ci-dessus mentionné

    InformationsquelleAutor Khushboo Tahir