[리액트네이티브] 폰트 적용하기_✍ / 로컬 폰트 적용, expo, 안드로이드

[React Native_ Font]

 

리액트 네이티브 컴포넌트에 로컬 폰트 적용하는 방법에 대해 알아보자

 

---

 

<STUDY>

 

 

 

1. expo-font 설치하기

expo install expo-font

 

 

2. 원하는 폰트 다운받기

 

   💡 원하는 폰트를 assets 폴더에 fonts 폴더에 다운받는다.

 

   💡 개인적으로 사용한 폰트는 무료 폰트 사이트인 산돌구름에서 다운받았습니다.

 

      👉  https://www.sandollcloud.com/

 

산돌구름

 

 

 3. 폰트 사용하기

import React, { useState, useEffect } from 'react';
import * as Font from 'expo-font';

``````

export default function App() {
  const [fontLoading, setFontLoading] = useState(false);
  
  useEffect(async () => {
    await Font.loadAsync({
      'symkyungha': require('./assets/fonts/SimKyungha.ttf'),
    });
    setFontLoading(true);
  }, []);
  
  return(
    {fontLoading && 
      <View>
        <Text style={{ fontFamily: 'symkyungha' }}> 안녕하세요 </Text>
      </View>
    }
  )
};

 

  💡 fontLoading : 폰트 로딩 여부를 알려주는 state (로딩이 완료되면 true로 업데이트)

 

  💡 loadAsync : 폰트 로딩 메소드

      ❕ 비동기 호출 방법

      ❕ 렌더링 이후에 로딩될 가능성이 있어 state를 만들어 로딩이 완료되었을 경우에만 렌더링 되도록 설정해 준다.

 

 

---

 

 

내가 보려고 정리하는 리액트 네이티브🔆

 

 

👉ez1n github 구경하기👈

 

ez1n - Overview