[react native+expo] 3초 동안 splash screen이 유지되는 웹뷰앱 만들기

react native와 expo로 웹뷰앱을 만들때, 앱을 시작함과 동시에 splash screen을 뜨게 할 수 있는데, 기본 설정대로 해주면 이 화면이 너무 순식간에 지나가고 맙니다. 저는 splash screen이 3초 동안 유지되게 하기 위해서 다음과 같이 코드를 작성했습니다.

 

App.js

import * as React from 'react';
import { WebView } from 'react-native-webview';
import * as SplashScreen from 'expo-splash-screen';
 
function sleep (ms) {
  return new Promise(
    resolve => setTimeout(resolve, ms)
  );
}
 
async function delay_splash() {
    await SplashScreen.preventAutoHideAsync();
    await sleep(3000);
    await SplashScreen.hideAsync();    
};
 
export default class App extends React.Component {
    
    render() {
        delay_splash();
        return <WebView source={{ uri: 'https://bskyvision.com' }} style={{ marginTop: 30 }} />;
    }
 
}

 

코드를 간단하게 설명해드리겠습니다. SplashScreen.preventAutoHideAsync()가 실행되면, SplashScreen.hideAsync()를 만날 때까지 자동으로 splash screen이 사라지는 것이 방지됩니다. 따라서 그 사이에 3초 딜레이를 준 것입니다. 그 함수를 delay_splash()라는 이름으로 만들었고, 그것을 render() 함수 안에 웹뷰를 리턴하기 전에 넣어줬습니다. 

 

이렇게 해주니 splash screen이 3초 동안 유지된 후에 웹뷰가 뜨네요.^^

 

<참고자료>

[1] docs.expo.io/versions/latest/sdk/splash-screen/

[2] docs.expo.io/versions/v40.0.0/sdk/webview/