Expo API

Expo에서 활용 가능한 API 정리

AppLoading

import AppLoading from "expo-app-loading";

import React from "react";
import { Image, Text, View } from "react-native";
import { Asset } from "expo-asset";
import AppLoading from "expo-app-loading";

export default const App = () => {
	const [ready, setReady] = useState(false);
  	const onFinsh = () => setReady(true);
  	
  	if (!ready) {
      return (
        <AppLoading
        	startAsync={startLoading}
  			onFinish={onFinsh}
  			onError={console.error}
      	/>
     );
	}
}

Appload 내에는 여러가지 prop가 있는데

startAsync => 시작 시에는 비동기적으로 api 등을 받아 올 때 사용할 수 있으며 이것이 종료될 때에는 onFinish가 실행된다.

(맨 처음 api나 그림파일 등을 불러올 때 비동기로 코드를 작성하면 됨)

Font 불러오기

import * as Font from "expo-font";
await Font.loadAsync(가져올 폰트);

-Asset 불러오기

Asset은 크게 2가지로 나눌 수 있다.

1. 현재 내가 가지고 있는 이미지가 있는 경우와

await Asset.loadAsync(require('./assets/example.png')

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

import { image } from "react-native";

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

await Image.prefetch(url);

각 불러올 때 hook을 사용하면 간편하게 사용할 수 있다.

단 asset에서 image.prefetch는 아래와 같이 사용할 수 없다.

로컬로 가지고 있는 경우만 사용가능

import { useFonts } from "expo-fonts"

const [loaded] = useFonts({
  Serif:require('./assets/fonts/Serif.ttf"),
  });
  
  if (!loaded) {
  	return null;
}

import { Asset } from "expo-asset";

const [assets] = useAssets([require('path/to/asset.jpg'), require('path/to/other.jpg')
                            
  if (!assets) {
  	return <AppLoading />;
    )