[React-Native] 폰트 적용하기(react-native-asset)

DaYoung·2023년 12월 7일

React-Native

목록 보기
11/35

react-native에서 외부 폰트를 추가하고 설정하는 방법에는
직접 설정하는 방법과 라이브러리 사용 이렇게 두가지 방법이 있다.
지금까지는 직접 설정하는 방법으로 사용했었는데 라이브러리를 사용하니까 정말 간단했다!

1.폰트 다운 받은 후, assets에 폰트 파일 추가

2.루트에 react-native.config 를 생성하고 font위치 명시

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

3.ios, android에 적용

터미널에 npx react-native-asset 를 입력하여 폰트를 적용

react-native의 버전
0.69 초과 :
터미널 내 npx react-native-asset 명령어 입력
0.69 이하 :
터미널 내react-native link 명령어 입력

- 폰트가 잘 적용되었는지 확인 작업

android
android/app/src/main/assets/fonts 에 폰트가 적용되어있는 것을 확인

ios
ios는 ios/{project-name}/Info.plist 에서 확인

<참고>
https://velog.io/@tmdghks_dev/React-Native-%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95

profile
안녕하세요. 프론트앤드 개발자 홍다영입니다.

0개의 댓글