TIL

React - Native 폰트 적용하기 (Android)

버퀴 2020. 7. 5. 15:36

화면에 폰트를 추가하여 훨씬 보기 좋게 화면을 꾸밀 수 있습니다.

개발 중인 어플의 로그인 창에 앱의 이름에 폰트를 적용을 하기로 하였습니다.

1. 원하는 폰트 파일을 추가하기

1. 'android/app/src/main/assets/font' 를 찾아 폰트파일을 추가하세요.

2. (RN >= 0.6)

1. root 경로에 react-native.config.js 파일을 하나 생성해 줍니다.

2. 그 파일 안에 밑의 내용을 추가합니다.

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ["./assets/fonts/"], // stays the same
};

 

(RN < 0.6)


1. package.json 파일에 들어갑니다.  그리고 밑의 코드를 추가합나다.

"rnpm": {
    "assets": [
	"./assets/fonts/"
    ]
},

 

4. 적용하기

1. react-native가 global로 깔려 있다면

react-native link

아니면 

npx react-native link

 

※ Font를 적용한 뒤에는 리로드하여 적용되었는지 확인하지 마시고 새로 빌드해서 확인해야 합니다