react native와 expo로 웹뷰앱을 만들때, 앱을 시작함과 동시에 splash screen을 뜨게 할 수 있는데, 기본 설정대로 해주면 이 화면이 너무 순식간에 지나가고 맙니다. 저는 splash screen이 3초 동안 유지되게 하기 위해서 다음과 같이 코드를 작성했습니다.
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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 }} />;
}
}
|
cs |
코드를 간단하게 설명해드리겠습니다. 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/
'코딩 > app' 카테고리의 다른 글
| [react native+expo] 3초 동안 splash screen이 유지되는 웹뷰앱 만들기 (0) | 2020.12.10 |
|---|---|
| [android studio] EditText에 placeholder 넣기 (0) | 2020.11.27 |
| [Android Studio] The emulator process for AVD Pixel_2_API_29 was killed 에러가 떴을 때 해결 방법 (2) | 2020.09.28 |
