9.10 Splash 화면 만들기
Splash 화면은 앱을 구동한 후 필요한 로딩이 끝날 때까지 전체화면을 가리는 화면입니다. 현재 우리 앱을 구동하면 초기에 처리해야 하는 작업이 두 가지 있습니다. 로그인 중인지 확인해야 하고, 로그인 중이라면 포스트 목록을 조회해야 합니다.
현재 사용자가 로그인 상태로 앱을 종료한 후 다시 실행하면 다음과 같은 화면을 보게 됩니다.
로그인(로그인 상태 확인) > 포스트 로딩 > 포스트 로딩 완료
앱을 구동한 후 필요한 데이터가 모두 로딩될 때까지 Splash 화면을 보여주는 기능을 구현해봅시다.
이를 구현하기 위해서는 react-native-splash-screen 라이브러리를 설치해야 합니다. 이 라이브러리는 Splash 화면을 원하는 시점에 사라지게 만들 수 있습니다.
$ yarn add react-native-splash-screen
그리고 Splash 화면에서 사용할 이미지를 준비해야 합니다.
▲ 그림 9-25 Splash 이미지
이와 같이 화면의 중앙에 보여주고 싶은 이미지를 준비합니다. 이미지 크기는 300px × 300px, 다양한 해상도에서 잘 나타나도록 2x 사이즈(600px), 3x 사이즈(900px)도 준비해줍니다.
여기서 사용할 Splash 이미지는 이미 준비되어 있으니 다음 링크에서 내려받으세요.