react-native
사용자 정의 글꼴

React Native (Android)에서 맞춤 글꼴을 사용하는 단계

1. android/app/src/main/assets/fonts/font_name.ttf 글꼴 파일을 붙여 넣으십시오.
2. react-native run-android 실행하여 Android 앱을 다시 컴파일하십시오.
3. 이제 네이티브 스타일에서 fontFamily: 'font_name' 을 사용할 수 있습니다 fontFamily: 'font_name'

React Native (iOS)에서 사용자 정의 글꼴을 사용하는 단계

1. Xcode 프로젝트에 글꼴을 포함시킵니다.

2. 대상 구성원 열에 포함되어 있는지 확인하십시오

탐색기에서 글꼴을 클릭하고 글꼴이 포함되어 있는지 확인하십시오.

3. 번들에 Resource로 포함 된 글꼴이 있는지 확인하십시오

Xcode 프로젝트 파일을 클릭하고 "Build Phases"를 선택하고 "Copy Bundle Resources"를 선택하십시오. 폰트가 추가되었는지 확인하십시오.

4. Application Plist (Info.plist)에 글꼴 포함

응용 프로그램 메인 폴더에서 Info.plist를 열고 "정보 속성 목록"을 클릭 한 다음 더하기 기호 (+)를 클릭하십시오. 드롭 다운 목록에서 "응용 프로그램에서 제공하는 글꼴"을 선택하십시오.

5. 응용 프로그램에서 제공하는 글꼴에 글꼴 이름 추가

응용 프로그램에서 제공하는 글꼴을 확장하고 글꼴 이름을 값 열에 정확하게 추가하십시오.

6. 응용 프로그램에서 사용하십시오.

    <Text style={{fontFamily:'IndieFlower'}}>
      Welcome to React Native!
    </Text>
   

Android 및 IOS의 맞춤 글꼴

• 프로젝트 폴더에 폴더를 만들고 글꼴을 추가하십시오. 예:

  • 예 : 여기서 "mystuff", "font"라는 이름의 루트에 폴더를 추가하고 그 안에 글꼴을 배치했습니다.
    • 

• 아래 코드를 package.json 추가하십시오.

  {
      ...
  
      "rnpm": {
          "assets": [
            "path/to/fontfolder"
          ]
      },
  
      ...
  }
  

  • 위 예제에서 package.json의 경로는 이제 "mystuff / fonts"가됩니다.

    "rnpm": {
      "assets": [
        "mystuff/fonts"
      ]
    }
    

• react-native link 명령을 실행하십시오.

• 아래의 프로젝트에서 사용자 정의 글꼴 사용

  <Text style={{ fontFamily: 'FONT-NAME' }}>
      My Text
  </Text>
  

  여기서 FONT-NAME 은 플랫폼 고유의 접두사입니다.

  기계적 인조 인간

  FONT-NAME은 파일의 확장자 앞에 나오는 단어입니다. 예 : 글꼴의 파일 이름은 Roboto-Regular.ttf 이므로 fontFamily: Roboto-Regular 합니다.

  iOS

  글꼴 이름을 마우스 오른쪽 버튼으로 클릭 한 다음 "정보 입수"를 클릭하면 글꼴 이름이 "전체 이름"입니다. (출처 : https://stackoverflow.com/a/16788493/2529614 ) 아래 스크린 샷에서 파일 이름은 MM Proxima Nova Ultra bold.otf 이지만 "Full Name"은 "Proxima Nova MM Proxima Nova Ultra bold.otf "이므로 fontFamily: Proxima Nova Semibold . 스크린 샷 -

• react-native run-ios 또는 react-native run-android 다시 react-native run-android 합니다 (이것은 리소스와 함께 다시 컴파일됩니다)