react native font faces

Reaja faces de fonte nativa

Emular facilmente o comportamento da face da fonte em reação-nativa.

Motivação:

O uso de fontes personalizadas no React Native fica complicado ao tentar trabalhar com diferentes pesos e estilos de fontes. Embora o tipo de TextStyle nativo do React inclua propriedades para fontFamily , fontWeight e fontStyle , essas propriedades parecem funcionar apenas para as fontes embutidas padrão e tenham suporte limitado ao usar fontes personalizadas. Por esse motivo, a seleção de um peso e estilo específicos da fonte é tradicionalmente alcançada especificando o nome exato do PostScript do arquivo de fonte carregado desejado.

Por exemplo:

 const style : ViewStyle = {
  fontFamily : 'Roboto-MediumItalic' ,
} ;

Isso dificulta a obtenção de estilos mesclados ou composição de estilo de texto. Uma solução preferível pode ser algo assim:

 const style : ViewStyle = {
  fontFamily : 'Roboto' ,
  fontWeight : '500' ,
  fontStyle : 'italic' ,
} ;

Esta biblioteca visa facilitar a vida, permitindo que os desenvolvedores nativos do React usem fontWeight e fontStyle com fontes personalizadas no iOS, Android e Web.

Começando

1. Adicione as dependências necessárias ao package.json do seu aplicativo.json:

   yarn add react-native-font-faces

   Se você estiver usando a Expo e precisar carregar arquivos de fontes personalizados adicionais em seu aplicativo, adicione também o seguinte:

   yarn add expo-font

2. Adicione uma chamada para enableFontFaces() no ponto de entrada do seu aplicativo e importe as faces da fonte desejada. Em seguida, basta usar a família de fontes como você normalmente esperaria:

    // App.tsx
   
   import React from 'react' ;
   import { useFonts } from 'expo-font' ;
   import { AppLoading } from 'expo' ;
   import { AppContent } from './AppContent' ;
   import { Roboto_All , enableFontFaces , getExpoFontMap } from 'react-native-font-faces' ;
   
   enableFontFaces ( Roboto_All ) ;
   
   export default function App ( ) {
     const [ loaded , error ] = useFonts ( getExpoFontMap ( Roboto_All ) ) ;
   
     if ( ! loaded ) {
       return < AppLoading /> ;
     } else if ( error ) {
       return < Text > { error . message } </ Text > ;
     } else {
       return (
         < View style = { styles . container } >
           < StatusBar style = "auto" />
           < Text style = { styles . text } > This should be Regular </ Text >
           < Text style = { [ styles . text , styles . italic ] } > This should be Italic </ Text >
           < Text style = { [ styles . text , styles . bold ] } > This should be Bold </ Text >
           < Text style = { [ styles . text , styles . bold , styles . italic ] } > This should be BoldItalic </ Text >
           < Text style = { [ styles . text , styles . thin ] } > This should be Thin </ Text >
           < Text style = { [ styles . text , styles . thin , styles . italic ] } > This should be ThinItalic </ Text >
         </ View >
       ) ;
     }
   }
   
   const styles = StyleSheet . create ( {
     text : {
       fontFamily : 'Roboto' ,
     } ,
     bold : {
       fontWeight : 'bold' ,
     } ,
     thin : {
       fontWeight : '100' ,
     } ,
     italic : {
       fontStyle : 'italic' ,
     } ,
     container : {
       flex : 1 ,
       backgroundColor : '#fff' ,
       alignItems : 'center' ,
       justifyContent : 'center' ,
     } ,
   } ) ; 

Migrando de 3.x

Na versão 4.x, removemos FontFacesProvider e adicionamos enableFontFaces . Siga estas etapas para migrar:

1. Remova todas as instâncias de <FontFacesProvider /> .
2. Adicione uma chamada para enableFontFaces() no ponto de entrada do seu aplicativo.
3. (Opcional) Adicione uma chamada para useFonts() (expo-font) ou loadFonts() (react-native-dinâmico-fontes) para carregar dinamicamente fontes remotas.

Migrando de 2.x

Na versão 3.x, simplificamos FontFacesProvider e removemos useFontFaces . Siga estas etapas para migrar:

1. Remova todas as instâncias de useFontFaces() .
2. Atualize o <FontFacesProvider/> do seu aplicativo para fornecer o onLoading e onError Props (Opcional).

Migrando de 1.x

Na versão 2.x, introduzimos FontFacesProvider e useFontFaces e removemos enableFontFaces . Siga estas etapas para migrar:

1. Remova todas as instâncias de enableFontFaces() .
2. Adicione um <FontFacesProvider/> em torno do componente raiz do seu aplicativo.
3. Adicione const [fontsLoaded] = useFontFaces(...) dentro de um corpo de um componente de função interna e manuseie o valor fontsLoaded adequadamente.