[인스타그램클론코딩] #10.1 Preloading Assets

안녕하세요 강정호 입니다

 

오늘은 이미지들을 Preloading 하는 것에 대해서 알아보겠습니다.

 

먼저 다운로드해야 할 라이브러리 입니다.

 

npm install @expo/vector-icons

npm install expo-app-loading

npm install expo-font

npm install expo-asset

 

npm add @expo/vector-icons

 

npm add expo-app-loading

 

import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { Ionicons } from "@expo/vector-icons";
import { Text, View } from 'react-native';
import AppLoading from "expo-app-loading";
import * as Font from "expo-font";
import { Asset } from 'expo-asset';

export default function App() {
  const [loaded, setLoaded] = useState(false);
  const preLoad = async () => {
    try{
      await Font.loadAsync({
        ...Ionicons.font
      });
      await Asset.loadAsync([require("./assets/instagram_logo.png")]);
      setLoaded(true);
    }catch(e){
      console.log(e);
    }
  };

  useEffect(() => {
    preLoad();
  }, []);

  return loaded ? (
    <View>
      <Text>Open up App  . start working with your app</Text>
    </View>
  ) : (
    <AppLoading />
  );
}