react native font faces

기본 글꼴면에 반응합니다

반응에서 @글꼴-진단 동작을 쉽게 모방합니다.

동기 부여:

React Native에서 사용자 정의 글꼴을 사용하면 다른 글꼴 무게와 스타일로 작업하려고 할 때 복잡해집니다. React Native TextStyle 유형에는 fontFamily , fontWeight 및 fontStyle 의 속성이 포함되어 있지만 이러한 속성은 기본 내장 글꼴에만 작동하는 것처럼 보이며 사용자 정의 글꼴을 사용할 때는 지원이 제한되어 있습니다. 이러한 이유로, 특정 글꼴 무게와 스타일을 선택하는 것은 원하는로드 된 글꼴 파일의 정확한 PostScript 이름을 지정하여 전통적으로 달성됩니다.

예를 들어:

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

이로 인해 병합 된 스타일 또는 텍스트 스타일 구성을 달성하기가 어렵습니다. 바람직한 솔루션은 다음과 같은 것일 수 있습니다.

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

이 라이브러리는 React Native 개발자가 iOS, Android 및 Web의 사용자 정의 글꼴과 함께 fontWeight 및 fontStyle 사용할 수 있도록함으로써 삶을 더 쉽게 만들기를 목표로합니다.

시작하기

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. 응용 프로그램의 EntryPoint에서 enableFontFaces() 에 호출을 추가하십시오.
3. (선택 사항) 원격 글꼴을 동적으로로드하기 위해 useFonts() (expo-font) 또는 loadFonts() (react-native-dynamic-fonts)에 호출을 추가합니다.

2.x에서 마이그레이션

버전 3.x에서는 FontFacesProvider 단순화하고 useFontFaces 제거했습니다. 다음 단계를 따라 마이그레이션하십시오.

1. useFontFaces() 의 모든 인스턴스를 제거하십시오.
2. onLoading and onError props (선택 사항)를 제공하려면 응용 프로그램의 <FontFacesProvider/> 업데이트하십시오.

1.x에서 마이그레이션

버전 2.X에서 FontFacesProvider 및 useFontFaces 소개하고 enableFontFaces 제거했습니다. 다음 단계를 따라 마이그레이션하십시오.

1. enableFontFaces() 의 모든 인스턴스를 제거하십시오.
2. 응용 프로그램의 루트 구성 요소 주변에 <FontFacesProvider/> 추가하십시오.
3. 내부 기능 구성 요소의 본체 내부에 const [fontsLoaded] = useFontFaces(...) 추가하고 fontsLoaded 값을 적절하게 처리합니다.