내배캠 TIL 2022.01.08

리액트 네이티브 폰트를 적용하는 법

정익님 일타 특강

import * as SplashScreen from "expo-splash-screen";
import { loadAsync } from "expo-font";

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    const prepare = async () => {
      await loadAsync({
        "NotoSansKR-Regular": require("./assets/fonts/NotoSansKR-Regular.otf"),
      });
      setAppIsReady(true);
    };
    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  useEffect(() => {
    onLayoutRootView();
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

 

expo-splash-screen

expo-font

다운 받아줘야한다.

 

스플래쉬를 의도적으로 늦춰줄것이다. 왜? 메인 페이지에서 필요한 정보들을 받아올 시간을 줄 수 있어요. 

splashScreen.preventAutoHideAsync()

splashscreen,hideAsync()

 

loadAsync를 이용한다 expo-font에서 임포트

 await 

font-family 해줘서 써줄 수 있다.  (전역에 쓰게 하려면 어떻게 해야해?) 

 

컴퓨터에서 못 읽는 ttf는 안드로이드용 otf는 ios 용 파일?

그래서 읽지 못하는 오류가 났다네요.

 

설명해주는 익스텐션 쓰시네 한글 설명?