React Native 내가 다운받은 폰트 파일 적용하기

 

폰트 바꾸는 건 많이 헤맸다.. 

 

정리하면 

 

1. ttf 또는 otf 폰트 파일을 다운 받는다

2. assets 아래 fonts 폴더를 만들고 그 안에 폰트 파일을 넣는다

3. root 위치에 react-native.config.js 파일을 만들고 그 파일에 다음과 같이 쓴다

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

 4. 터미널에서 npx react-native link 를 실행한다. 대충 폰트 파일을 어플이 받아갈 수 있게 이어준다는 의미인듯

 

여기까지만 하고! fontFamily에 다운 받은 폰트 이름 쓰고 왜 안 돼 🤬!!! 이러고 있었는뎁 ㅎ 

화를 가라 앉히고 에러 메시지를 보니 그 안에 답이 있었다

custom 폰트는 Font.loadAsync를 써서 불러와야 한다고 써 있었다...

 

5. Font.loadAsync로 폰트 불러오기 

import * as Font from 'expo-font';

export default class extends React.Component {
	// 폰트 불러와졌는지 확인하는 state
	state = {..., fontsLoaded: false};
	...
	
    // 폰트 불러오기 
    async loadFonts() {
      await Font.loadAsync({
        NanumBarunGothic: require('./assets/fonts/NanumBarunGothic-Regular.otf'),
      });
      this.setState({ fontsLoaded: true });
    }
  
   ...
   
    componentDidMount() {
      this.loadFonts();
    }
  
    render() {
    const {..., fontsLoaded} = this.state;
  
  	// 폰트 로딩 완료되었으면 
    if (this.state.fontsLoaded) {
    return ( ... ); 
    // 폰트 로딩중이면
    } else {return null}
    
// 폰트 적용하기
const styles = StyleSheet.create({
	text: {
    ...
    fontFamily: 'NanumBarunGothic',
    },
    ...

 

구글링하면 어떤 건 1-4만 말해주고 어떤 건 5만 말해주고 해서 어이가 없었음..

그리고 대부분 StyleSheet까진 안 보여주더라??!

fontFamily에는 require(폰트파일path) 이 부분의 왼쪽에 있는 바로 그 이름!을 쓰면 된다 ㅎ