react native custom fonts

react-native-custom-fonts

Utilisez des polices dynamiques spécifiées via un emplacement de réseau, au lieu de les gérer dans vos versions natives!

Commencer

> = 0,60,0

yarn add react-native-custom-fonts # or npm install --save react-native-custom-fonts

Reconstruisez ensuite votre application. Sur iOS, assurez-vous d' pod install vos cocoapodes dans le répertoire de votre application /ios .

<= 0,59.x

Utilisation yarn :

yarn add react-native-custom-fonts
react-native link react-native-custom-fonts

Changements de rupture

• <1.2.0
  • Nous avons ajouté un tas d'améliorations de stabilité et migré vers une nouvelle API basée sur les crochets.
  • L'hélice fontFaces Array a été transformée en objet fontFaces , dont les clés sont les noms des styles de police que vous souhaitez référencer dans votre application.
  • Pour utiliser une fontFace , vous devez spécifier le nom dans un appel à useCustomFont(name:String) .

✍️ Exemple

Veuillez consulter l'exemple de projet pour une démonstration complète. Just cd dans le répertoire, utilisez npm ou yarn pour installer les dépendances, puis exécutez l'application à l'aide des éléments suivants:

react-native run-android # run on android
react-native run-ios     # run on ios

Simple

 import React from "react" ;
import PropTypes from "prop-types" ;
import { View , Text } from "react-native" ;
import CustomFontsProvider , { useCustomFont } from "react-native-custom-fonts" ;

const fontFaces = {
  // XXX: Specify the local name of your font. You'll use this to refer to it via the useCustomFont hook.
  'UbuntuBold' : {
    uri : 'https://github.com/google/fonts/raw/master/ufl/ubuntu/Ubuntu-Bold.ttf' ,
    fontFamily : 'Ubuntu' ,
    fontWeight : 'bold' ,
    // XXX: You can also specify additional font styling.
    color : 'blue' ,
  } ,
} ;

const SomeComponent = ( ) => {
  // Fetch the desired font by name. When the font has been cached, it will automatically update the View.
  const { ... fontProps } = useCustomFont ( 'UbuntuBold' ) ;
  return (
    < Text
      { ... fontProps }
      children = "Hello, world!"
    />
  ) ;
} ;

export default ( ) => (
  < CustomFontsProvider
    fontFaces = { fontFaces }
  >
    < SomeComponent />
  </ CustomFontsProvider >
) ;

Où est ma référence?

react-native-custom-fonts capture le ref Prop du composant Text pour effectuer une affectation de propriété d'exécution. Vous pouvez toujours accéder à la référence, de deux manières:

Vous pouvez soit fournir une référence :

 const ref = useRef ( ) ;
const { ... fontProps } = useCustomFont ( 'UbuntuBold' , ref ) ;
return (
  < Text
    ref = { ref }
    { ... fontProps }
  />
) ;

Ou vous pouvez utiliser la référence fournie :

 const { ref , ... fontProps } = useCustomFont ( 'UbuntuBold' ) ;
return (
  < Text
    ref = { ref }
    { ... fontProps }
  />
) ;

Génial, alors qu'en est-il des styles supplémentaires?

Il est possible de le faire aussi. Il suffit de récupérer l'hélice style de l'appel à useCustomFont :

 const { style , ... fontProps } = useCustomFont ( 'UbuntuBold' ) ;
return (
  < TextInput
    style = { [ style , { fontColor : 'blue' } ] }
    { ... fontProps }
  />
) ; 

? Types d'accessoires

CustomFontsProvider

Il s'agit d'un fournisseur de contexte React pour tous les enfants qui ont été enveloppés d'un appel à ReactNativeCustomFonts.withCustomFont . Gère la mise en cache et l'attribution de polices éloignées aux enfants.

Nom d'accessoire	Type de données	Requis	Défaut	Description
fontFaces	propypes.shape ({})	FAUX	{}	Définit la configuration des polices distantes.
fallback	propypes.shape ({})	FAUX	{Couleur: 'Red', Fontweight: 'Bold'}	Le style à utiliser lorsque les téléchargements de polices échouent.
onDownloadDidStart	propypes.func	FAUX	() => null	Rappel pour le moment où le fournisseur commence à télécharger les polices.
onDownloadDidEnd	propypes.func	FAUX	() => null	Rappel pour le moment où le fournisseur a terminé le téléchargement des polices.
onDownloadDidError	propypes.func	FAUX	() => null	Appelé lorsqu'une erreur a été lancée lors du téléchargement des polices.

? Contributif

Veuillez signaler tout problème que vous rencontrez et n'hésitez pas à soumettre une demande de traction si vous souhaitez ajouter des améliorations. Pour apporter des modifications, vous pouvez simplement vous ramifier à partir master .

✌️ Licence

Mit