iOS 및 Android용 React Native 0.63에 사용자 지정 글꼴 추가

React Native App에 맞춤 글꼴을 추가하는 것은 매우 쉽고 몇 단계만 거치면 됩니다. 내 앱에 맞춤 글꼴을 추가하기 위해 수행한 단계를 기록하고 있습니다.

구글 폰트 다운로드

먼저 google fonts에서 원하는 글꼴을 다운로드해야 합니다.

앱 폴더에 글꼴 추가

그런 다음 src/assets 폴더에 fonts 폴더를 만들고 다운로드한 글꼴 파일을 붙여넣습니다.

글꼴 내보내기

이제 앱의 루트에 react-native.config.js라는 파일을 만들고 다음과 같이 글꼴 폴더의 경로를 추가합니다.

module.exports = {
   assets: ['./src/assets/fonts'],
};

자산을 프로젝트에 연결

이것을 추가한 후 프로젝트 폴더에서 링크 명령을 실행하십시오.

npx react-native link

링크 명령은 앱의 android 폴더에 있는 assets 폴더와 iOS 폴더에 있는 info.plist 파일에 글꼴 파일을 추가합니다.

대상에 리소스 추가

이제 이 시점에서 맞춤 글꼴이 Android 앱에서 작동하기 시작하지만 iOS에서 작동하도록 하려면 마지막 단계를 수행해야 합니다.

Xcode에서 앱의 원하는 대상으로 이동하여 Build Phases 탭을 선택하고 아래와 같이 "Copy Bundle Resources"탭에 글꼴 파일을 추가합니다.



그리고 끝났습니다! 🎉 🎊
의견에 의견을 공유하실 수 있습니다.