[React Native] ios, android 폰트 설정

React Native 프로젝트에 폰트를 설정하는 방법은 두가지가 있다.

 

첫번째는 ios, android 각 플랫폼이 참조하는 폴더에 직접 파일을 추가해서 설정해주는 방법과,

루트 경로의 폰트 파일을 rnpm 을 통해서 설정하는 방법이다.

 

판단 후 편한대로 사용하면 될 것 같다.

---

ios, android 폴더에 직접 파일을 추가해서 설정해주는 방법

 

 

android 설정

1. android/app/src/main/assets/fonts 폴더에 폰트 파일 추가
2. 안드로이드 프로젝트 리빌드하면 자동으로 설정된다.

$ npx react-native run-android

 

ios 설정

1. xcode 로 ios 폴더 내에서 Fonts 폴더를 만들고 해당 폰트를 넣기

react-native-app
└── android
└── ios
	└── Products
	└── Fonts
		└── 폰트.otf

 

2. xcode를 열고 프로젝트에서 우클릭하여 Add Files to "프로젝트이름" 클릭

 

3. ios/Fonts 폴더를 선택 -> Create folder references를 선택 -> Add to target: 자신의 프로젝트 -> Add를 눌러 폴더를 추가

 

4. "프로젝트 이름"/"프로젝트 이름"/Info.plist 파일 열고 우클릭하여 아래처럼 Fonts provided by application 에 row 추가

 

5. ios 프로젝트 run 하면 설정된다.

---

루트 경로의 폰트 파일을 rnpm 을 통해서 설정하는 방법

1. root 경로에 assets/font 디렉토리를 만들어 주고 폰트 파일을 넣어준다.

react-native-app
└── ios
└── android
└── assets
	└── fonts
		└── 폰트.otf

 

2. rnpm을 설치한다.

$ npm install -g rnpm

 

3. package.json에 다음을 추가한다.

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

 

4. 다음 명령어를 실행하면 ios, andorid에 자동으로 폰트가 추가된다.

$ rnpm link assets