[ReactNative_study_2] 로딩 전 파일 불러오기 font/ asset

-Font 불러오기

expo install expo-font 로 font를 설치한 뒤 font를 가져온다.

아래와 같이 Font로 전체를 가져온다음에 

import * as Font from 'expo-font';
await Font.loadAsync(가져올 Font 이름);

 

으로 가져온다.

 

-Asset 불러오기

Asset은 크게 2가지로 나눌 수 있다. 현재 내가 가지고 있는 이미지가 있는 경우와 인터넷에서 이미지 주소로가져오는 경우 이다.

1) 이미지를 가지고있는경우

  expo install expo-asset으로 설치한 후, 아래와 같이 사용한다. 여기서 가지고 있는 파일의 경우 require를 사용ㅎ한다

await Asset.loadAsync(require('./assets/snack-icon.png'));

2) 이미지를 인터넷에서 주소로 가지고 오는 경우

import { Image } from 'react-native';

// preFetch 메서드를 통해서 가지고 온다.

await Image.prefetch(url);

 

* 각각을 불러올 때 hook을 사용하면 간편하게 사용할 수 있다. 단 asset에서 image.prefetch는 아래와 같이 사용할 수 없다. 로컬로 가지고 있는 경우에만 사용가능

  import { useFonts } from 'expo-font';
  
  const [loaded] = useFonts({
    Montserrat: require('./assets/fonts/Montserrat.ttf'),
  });
  
  if (!loaded) {
    return null;
  }

import { Asset } from 'expo-asset';


const [assets] = useAssets([require('path/to/asset.jpg'), require('path/to/other.png')]);

  if (!assets) {
    return <AppLoading />;
  }