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]]; .... }
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.
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.
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.
Ouvrez d’abord vos journaux XCode, comme:
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.
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é.