react native custom fonts

reaccionamiento-nativo-customado

¡Use fuentes dinámicas especificadas a través de una ubicación de red, en lugar de administrarlas en sus compilaciones nativas!

Empezando

> = 0.60.0

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

Luego reconstruya su aplicación. En iOS, asegúrese de pod install sus cocoapods en el directorio de su aplicación /ios .

<= 0.59.x

Usando yarn :

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

Cambios de ruptura

• <1.2.0
  • Hemos agregado un montón de mejoras de estabilidad y migramos a una nueva API basada en ganchos.
  • El accesorio de matriz fontFaces se ha convertido en un objeto fontFaces , cuyas teclas son los nombres de los estilos de fuentes a los que le gustaría hacer referencia en su aplicación.
  • Para usar un fontFace , debe especificar el nombre en una llamada a useCustomFont(name:String) .

✍️ Ejemplo

Consulte el proyecto de ejemplo para una demostración completa. Simplemente cd en el directorio, use npm o yarn para instalar las dependencias, luego ejecute la aplicación utilizando lo siguiente:

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 >
) ;

¿Dónde está mi árbitro?

react-native-custom-fonts captura el accesorio ref del componente Text para realizar asignación de propiedades de tiempo de ejecución. Todavía puede acceder al Ref, de una de dos maneras:

Puede suministrar un árbitro :

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

O puede usar la referencia proporcionada :

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

Impresionante, ¿qué pasa con los estilos adicionales?

Es posible hacer esto también. Simplemente obtenga el accesorio style de la llamada a useCustomFont :

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

? Tipos de apoyo

CustomFontsProvider

Este es un proveedor de contexto React para todos los niños que fueron envueltos con un llamado a ReactNativeCustomFonts.withCustomFont . Gestiona el almacenamiento en caché y la asignación de fuentes remotas a los niños.

Nombre	Tipo de datos	Requerido	Por defecto	Descripción
fontFaces	proptypes.shape ({})	FALSO	{}	Define la configuración de las fuentes remotas.
fallback	proptypes.shape ({})	FALSO	{Color: 'Red', FontWeight: 'Bold'}	El estilo de usar cuando las descargas de fuentes fallan.
onDownloadDidStart	PropTypes.func	FALSO	() => nulo	Devolución de llamada para cuando el proveedor comienza a descargar las fontfaces.
onDownloadDidEnd	PropTypes.func	FALSO	() => nulo	La devolución de llamada para cuándo el proveedor ha completado la descarga de Fontfaces.
onDownloadDidError	PropTypes.func	FALSO	() => nulo	Llamado cuando se ha lanzado un error al descargar las fontfaces.

? Que contribuye

Informe cualquier problema que se encuentre y no dude en enviar una solicitud de extracción si desea agregar cualquier mejora. Para hacer cualquier cambio, puede simplemente ramificarse de master .

✌️ Licencia

MIT