React Native에서 사용자 정의 폰트가 작동하지 않음-해결

React Native에서 사용자 정의 폰트가 작동하지 않음

React Native 앱에서 Google Fonts의 사용자 정의 폰트를 사용하는 데 문제가 발생하는 경우 혼자가 아닙니다. 이 문서에서는 사용자 정의 폰트가 작동하지 않을 수 있는 일반적인 원인을 설명하고, 문제 해결을 위한 솔루션을 제공합니다.

문제: Android에서 폰트가 표시되지 않음

폰트 파일을 ‘app/fonts’ 디렉토리에 배치하고 ‘react-native link’를 사용하여 링크를 추가했지만, Android에서 폰트가 여전히 표시되지 않는 경우 다음 단계를 따르십시오:

1. 1. 프로젝트의 루트 폴더에 ‘react-native.config.js’라는 파일을 생성합니다.

react-native.config.js

1. 1. ‘react-native.config.js’ 파일에 다음 코드를 추가합니다:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./app/fonts'],
};

1. 1. 루트 프로젝트 경로에서 명령어 react-native link를 실행합니다.

react-native link

1. 1. react-native run-android 명령어를 사용하여 앱을 실행합니다.

react-native run-android

참고: React Native 버전 0.69.x 이상을 사용하는 경우 ‘react-native link’ 명령어 대신 ‘npx react-native-asset’을 사용합니다.

문제: iOS에서 인식되지 않는 폰트 패밀리

iOS에서 “인식되지 않는 폰트 패밀리” 오류가 발생하는 경우 다음 단계를 따르십시오:

1. 폰트 파일 이름이 .ttf 파일의 메타데이터와 일치하는지 확인합니다.
2. 폰트 파일을 Xcode 프로젝트의 리소스에 추가합니다.
3. iOS에서 앱을 다시 빌드하고 실행합니다.
4. 문제가 지속되는 경우, 어떤 스타일이 폰트 설정을 덮어쓰고 있는지 확인하십시오. 폰트의 fontWeight 매개변수나 다른 폰트 변형을 설정하지 않았는지 확인하십시오.

또한, 일부 폰트는 정상적으로 작동하기 위해 특정 변형이 필요할 수 있습니다. 예를 들어, fontWeight 스타일을 사용하여 폰트 무게를 설정하는 대신 “Roboto-Bold” 또는 “Roboto-Thin”과 같은 폰트 변형을 직접 사용해 보십시오.

결론

React Native에서 사용자 정의 폰트를 사용하는 것은 서로 다른 플랫폼을 다룰 때 특히 도전적일 수 있습니다. 이 문서에서 안내하는 문제 해결 팁을 따르면 Android와 iOS에서 폰트가 표시되지 않거나 인식되지 않는 폰트 패밀리와 관련된 문제를 해결할 수 있습니다.

React Native 버전 및 올바른 폰트 파일 이름 및 경로를 제공하는지 확인하고, 이러한 해결 방법을 구현하여 React Native 앱에서 사용자 정의 폰트를 성공적으로 통합하고 사용할 수 있습니다.

참고 자료 :

https://stackoverflow.com/questions/43021540/custom-font-not-working-in-react-native

같은 카테고리의 다른 글 보기 :

reactjs