[React Native Expo] 스플래시화면 적용하기

스플래시화면은 아이콘과 마찬가지로 expo 패키지에 기본으로 제공된다 splash.png 이걸 교체하면되는데

근데 스플래시화면을 컨트롤 하고싶을것이다. 예를들어 홈화면의 api데이터들이 가져와지기전까지 스플래시화면을 띄우고싶다던가하면

스플래시화면을 js로 컨트롤할 수 있다.

일단 스플래시화면 컨트롤을 하려면 설치해야되는 라이브러리가 있다

npx expo install expo-splash-screen

설치설치

import { SplashScreen } from 'expo-router';

function delay_splach() {
    SplashScreen.preventAutoHideAsync();
}

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

useEffect(() => {
    if (fontsLoaded && Token !== null) {
      SplashScreen.hideAsync();
    }
}, [fontsLoaded, Token]);

이렇게해주면 SplashScreen.preventAutoHideAsync();로 스플래시화면이 자동으로 사라지는걸 막아주고

fontLoaded값과 Token값이 있을때 스플래시화면을 지워줄 수 있다.

 

그럼 적용된 모습을 볼 수 있다.