react native font faces

Реагировать нативные лиц шрифтов

Легко эмулировать поведение @font-face у реагируемого.

Мотивация:

Использование пользовательских шрифтов в React Native становится сложным при попытке работать с различными весами и стилями шрифтов. Несмотря на то, что тип Native TextStyle React включает в себя свойства для fontFamily , fontWeight и fontStyle , эти свойства, по-видимому, работают только для встроенных шрифтов по умолчанию и имеют ограниченную поддержку при использовании пользовательских шрифтов. По этой причине выбор конкретного веса и стиля шрифта традиционно достигается путем указания точного имени PostScript желаемого загруженного файла шрифта.

Например:

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

Это затрудняет достижение объединенных стилей или композиции в стиле текста. Предпочтительным решением может быть что -то вроде этого:

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

Эта библиотека направлена на то, чтобы облегчить жизнь, позволяя React Native Developers использовать fontWeight и fontStyle с пользовательскими шрифтами на iOS, Android и Web.

Начиная

1. Добавьте необходимые зависимости в package.json вашего приложения.

   yarn add react-native-font-faces

   Если вы используете Expo и вам нужно загружать дополнительные пользовательские файлы шрифтов в ваше приложение, также добавьте следующее:

   yarn add expo-font

2. Добавьте вызов, чтобы enableFontFaces() в точке входа вашего приложения и импортируйте желаемые лиц шрифтов. Затем просто используйте семью шрифтов, как обычно ожидаете:

    // 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' ,
     } ,
   } ) ; 

Мигрируя с 3.x

В версии 4.x мы удалили FontFacesProvider и добавлены enableFontFaces . Следуйте этим шагам, чтобы мигрировать:

1. Удалите все экземпляры <FontFacesProvider /> .
2. Добавьте вызов, чтобы enableFontFaces() в точку записи вашего приложения.
3. (Необязательно) Добавьте вызов в useFonts() (EXPO-FONT) или loadFonts() (React-C-Knative-Dynamic-Fonts), чтобы динамически загружать удаленные шрифты.

Мигрируя с 2.x

В версии 3.x мы упростили FontFacesProvider и удалили useFontFaces . Следуйте этим шагам, чтобы мигрировать:

1. Удалите все экземпляры useFontFaces() .
2. Обновите свое приложение <FontFacesProvider/> , чтобы предоставить реквизиты onLoading и onError (необязательно).

Мигрируя из 1.x

В версии 2.x мы представили FontFacesProvider и useFontFaces и удаленные enableFontFaces . Следуйте этим шагам, чтобы мигрировать:

1. Удалите все экземпляры enableFontFaces() .
2. Добавьте <FontFacesProvider/> вокруг корневого компонента вашего приложения.
3. Добавить const [fontsLoaded] = useFontFaces(...) Внутри корпуса внутренней функциональной компонента и обработайте fontsLoaded значение.