[React Native] 스플래쉬 스크린(splash-screen) 구현하기

 

디지니, 넷플릭스 같은 앱을 키게 되면 맨 처음 이런 화면이 나오는걸 많이 보셨을겁니다.

 

이 화면을 스플래쉬 스크린(splash-screen) 이라고 합니다.

스플래쉬 스크린을 사용하는 이유는,

사실 저 화면 뒤에선 아주 바쁘게 코드가 돌아가고 있습니다.

 

사진, 또는 데이터를 서버로부터 갖고와서 화면에 보여지게 하거나,

사용자의 핸드폰에 앱의 로그인 데이터가 있는지 조회를 하거나,

등등 앱 실행 초기에 보여주면 안되는 과정을 가리기 위해 스플래쉬 스크린을 사용합니다.

 

React Native에서 이를 적용하기 위해선 설정을 해줘야합니다.

지금부터 그 과정을 보여드리겠습니다.

 

# 해당 글의 과정은 안드로이드 설정입니다.

 

 

React-native-splash-screen 공식 GitHub :

https://github.com/crazycodeboy/react-native-splash-screen

GitHub - crazycodeboy/react-native-splash-screen: A splash screen for react-native, hide when application loaded ,it works on iO

 

본 과정은 공식 GitHub를 통해 작성되었습니다.

 

# 패키지 설치

npm i react-native-splash-screen

 

# Plugin 설치

react-native link react-native-splash-screen

 

(1)

 

플러그인 설치 후, android/settings.gradle에 

위 사진의 빨간 네모 박스로 된 부분이 추가됬는지 확인해주세요.

include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

만약 없다면 직접 입력해주세요.

 

(2)

 

android/app/build.gradle 에서 dependencies에 빨간 네모 상자 속 코드가 있는지 확인해주세요

 

implementation project(':react-native-splash-screen')

 

없다면 추가해주세요.

 

# STEP 1

 

 

 

	...

import android.os.Bundle;

	...
    
import org.devio.rn.splashscreen.SplashScreen;
//import com.cboy.rn.splashscreen.SplashScreen;

	...
    
  @Override
  protected void onCreate(Bundle saveInstanceState){
  
  	...
    
    SplashScreen.show(this); 
    
    ...
  }

 

android/app/src/main/java/com/[프로젝트명]/MainActivity.java에

위 사진의 빨간 네모칸의 코드를 추가해주세요.

 

 

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; 

// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen;

설치 된 react-native-splash-screen의 버젼에 따라 적혀야할 import가 달라지니, 혹시 예전 버젼을 쓰신다면 확인 바랍니다.

 

 

# STEP 2

 

(1)

android/app/src/main/res/

 

android/app/src/main/res/ 위치에 drawable 와 layout 폴더를 만들어주세요.

 

(2)

스플래쉬 스크린으로 사용하고 싶은 파일을 android/app/src/main/res/drawable 폴더 안에 넣어주세요.

 

 

(3)

android/app/src/main/res/layout 폴더 안에 launch_screen.xml 파일을 만들어 주세요.

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

 

android/app/src/main/res/layout/launch_screen.xml 파일 안에 위 코드를 넣어주세요.

 

 

(4)

 

android/app/src/main/res/values에 color.xml 파일을 만들어주세요.

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

android/app/src/main/res/values/color.xml 파일에 위 코드를 넣어주세요.

 

 

# 모듈 API 사용하기

import SplashScreen from 'react-native-splash-screen';

// 스플래쉬 스크린 보이기
SplashScreen.show();

// 스플래쉬 스크린 숨기기
SplashScreen.hide();

 

본인의 설계에 맞게, 스플래쉬 스크린을 보여주고, 가려주고 해주시면 됩니다.

 

주로 화면이 맨처음 시작하는 부분에 show()를 넣어주고,

 

초기 화면 세팅이 끝나면 hide()를 통해 스크린을 숨겨주시면 됩니다.