Asset

expo-asset은 앱의 런타임에 필요한 파일에 대한 인터페이스를 제공한다. 

 

예를들어 이미지, 글꼴 및 사운드 등이 있다. 

 

자세한 사용법은 Expo 공식 문서인 아래의 링크에서 확인 가능

 

https://docs.expo.dev/versions/v46.0.0/sdk/asset/

Asset - Expo Documentation

설치

npx expo install expo-asset

API 사용 법 

import {Asset} from "expo-asset";
import {Image} from "react-native";

const isLoading = async () => {
    await Asset.loadAsync(require("./1234.png"));                               // 시스템 내의 이미지 파일 로딩 
    await Image.prefetch(url);                                                              // 다른 서버에 파일이 있을경우
}

생각보단 쉽다. 

 

그리고 이미지 등 파일 역시 여러개를 동시에 로딩을 하려면 

const loadImages = (images) => images.map(images => {
    if (typeof images === "string"){                                             // url을 보냈으면 type이 string
        return Image.prefetch(images);
    }else{
        return Asset.loadAsync(images);
    }
});

const isLoading = async() => {
    const images = loadImages(["https://www.aaa.com/a", requere("./a.png")]);

    await Promise.all([...images]);     // 이미지와, 폰트 모두 로딩이 될때 까지 기다려 준다.
}

 

# hook 사용하기 

 

Font와 마찬가지로 Asset도 훅을 사용해서 로딩이 가능하다 . 

import useAssets from "expo-asset";

const [assets] = useAssets([require("./a.png")]);

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

역시 Fonts와 마찬가지로 hook을 사용해서 로딩을 하면 해당 이미지를 단순 Loading만 가능하다.

 

추가로 Image.prefetch() 를, 즉 원격 저장소의 파일들을 가져오지 못한다. 

 

Image.prefetch() 사용 및 이후 추가 작업을 하려면 API 방식을 사용해야 한다. 

 

단순 파일 로딩이라면 hook을 사용해도 나쁘지 않을거 같다.