[React Native] 폰트 적용하기

react나 react native나 폰트를 적용하는 것은 생각보다 귀찮다. 

react의 경우 google fonts를 사용한다면 public에 있는 index.html에 링크를 추가해주면 되지만 생각보다 react native는

귀찮았다.

 

그러다가 이번에 간단하게 처리하는 방법을 알아서 정리한다. 

 

폰트 저장 

먼저 원하는 폰트를 /assets/fonts 폴더에 저장한다. 

기본적으로 assets 폴더도 없을 것이고 fonts 폴더는 더더욱 없을 것이다. 그러니 해당 폴더를 만들고 내부에 사용할 

폰트 파일을 추가해주면 된다. 

 

라이브러리 사용

npm i react-native-asset

원래는 android 폴더 등에 설정을 해야하는데 그런 작업을 간단하게 해주는 라이브러리가 바로 react-native-assets이다. 

 

설치 후 react-native.config.js 파일을 만들고 내부에 경로를 지정한다. 

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

assets의 경로는 실제 해당 파일이 위치하는 경로이다.

 

이후 명령어를 입력해준다. 

npx react-native-asset

이렇게 하면 iOS와 안드로이드에서 바로 해당 폰트를 사용할 수 있다.