콘솔 켜기

1. 탭 하나를 열고 npm run start
2. 다른 터미널 탭을 새로 열고 npm run ios or npm run android

이렇게 하면 npm run start를 실행한 터미널에서 r만 누르면 쉽게 앱을 재 로딩할 수 있음

프로젝트 초기화 하기

App.js를 아래와 같은 상태로 만든 뒤 시작

import React from "react";

export default function App() {
  return null;
}

Install AppLoading

expo install expo-app-loading

Code

import React, { useState } from "react";
import AppLoading from "expo-app-loading";
import { Text } from "react-native";

export default function App() {
  const [ready, setReady] = useState(false);
  const onFinish = () => setReady(true);
  const startLoading = async () => {
    await new Promise((resolve) => setTimeout(resolve, 10000));
  };

  if (!ready) {
    return (
      <AppLoading
        startAsync={startLoading}
        onFinish={onFinish}
        onError={console.error}
      />
    );
  }
  return <Text>Hola!!!</Text>;

• startAsync: 앱이 시작되면 실행되는 비동기 함수
• onFinish: startAsync가 끝나면 실행되는 훅
• onError: 에러 발생시 실행되는 훅

앱이 시작되면 startLoading이 실행됨. 보통 이때 데이터, 스타일 등을 불러 옴. 그 작업이 이뤄지는 비동기함수들이 모두 처리가 되면 onFinish가 작동하고 작동 대상 기능들이 실행됨

Asset, Fonts

앱 구동에 필요한 asset들을 미리 불러올 수 있음

expo install expo-font
expo install expo-asset

Code

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

const loadFonts = (fonts) => fonts.map((font) => Font.loadAsync(font));
const loadAssets = (assets) =>
  assets.map((asset) => {
    if (typeof asset === "string") {
      return Image.prefetch(asset);
    } else {
      return Asset.loadAsync(asset);
    }
  });

export default function App() {
  const [ready, setReady] = useState(false);
  const onFinish = () => setReady(true);
  const startLoading = async () => {
    const fonts = loadFonts([Ionicons.font]);
    const assets = loadAssets([
      "<https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx53GlNMrEtHJS1p3WFeMxsPM2s-U7FhxTdXfo_r15Vw&s>",
    ]);
    await Promise.all([...fonts, ...assets]);
  };

  if (!ready) {
    return (
      <AppLoading
        startAsync={startLoading}
        onFinish={onFinish}
        onError={console.error}
      />
    );
  }
  return <Text>Hola!!!</Text>;
}