react native custom fonts

React-native-Custom-Fonts

Use fontes dinâmicas especificadas por meio de um local de rede, em vez de gerenciá -las em suas compilações nativas!

Começando

> = 0,60.0

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

Em seguida, reconstrua seu aplicativo. No iOS, certifique -se de pod install seus Cocoapods no diretório do seu aplicativo /ios .

<= 0,59.x

Usando yarn :

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

Quebrando mudanças

• <1.2.0
  • Adicionamos várias melhorias de estabilidade e migramos para uma nova API baseada em ganchos.
  • O suporte da matriz fontFaces foi transformado em um objeto fontFaces , cujas teclas são os nomes dos estilos de fonte que você gostaria de fazer referência em seu aplicativo.
  • Para usar um fontFace , você deve especificar o nome em uma chamada para useCustomFont(name:String) .

✍️ Exemplo

Confira o projeto de exemplo para uma demonstração completa. Basta cd no diretório, use npm ou yarn para instalar as dependências e executar o aplicativo usando o seguinte:

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

Simples

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

Onde está meu ref?

react-native-custom-fonts captura o suporte ref do componente Text para fazer a atribuição de propriedades de tempo de execução. Você ainda pode acessar o REF, de duas maneiras:

Você pode fornecer um ref :

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

Ou você pode usar o ref fornecido :

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

Incrível, e quanto aos estilos adicionais?

É possível fazer isso também. Basta buscar o suporte style da chamada para useCustomFont :

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

? Tipos de suporte

CustomFontsProvider

Este é um provedor de contexto de reação para todas as crianças que foram envolvidas com uma chamada para ReactNativeCustomFonts.withCustomFont . Gerencia o cache e a atribuição de fontes remotas para crianças.

Nome do suporte	Tipo de dados	Obrigatório	Padrão	Descrição
fontFaces	Proptypes.Shape ({})	falso	{}	Define a configuração das fontes remotas.
fallback	Proptypes.Shape ({})	falso	{color: 'Red', Fontweight: 'Bold'}	O estilo a ser usado quando os downloads de fontes falham.
onDownloadDidStart	Proptypes.func	falso	() => nulo	Retorno de chamada para quando o provedor começa a baixar os Fontfaces.
onDownloadDidEnd	Proptypes.func	falso	() => nulo	Retorno de chamada para quando o provedor concluiu o download dos Fontfaces.
onDownloadDidError	Proptypes.func	falso	() => nulo	Chamado quando um erro foi lançado ao baixar os Fontfaces.

? Contribuindo

Por favor, relate todos os problemas que você encontrar e sinta -se à vontade para enviar uma solicitação de tração se quiser adicionar aprimoramentos. Para fazer alterações, você pode apenas ramificar do master .

✌️ Licença

Mit