React Native + Splash Screen 적용 방법
React Native + Splash Screen 적용 방법에 대해 설명하는 페이지입니다.
Tags
TypeScript, React Native, Mobile, Android Studio
Environment
OS: Windows 11
react-native v0.76.5
react-native-splash-screen v3.3.0
1. 개요
이번 글에서는 Android 플랫폼을 대상으로 한 React Native 프로젝트에서 스플래시 화면(Splash Screen)을 구현하는 방법에 대해 설명하겠습니다.
2. Step 1 - react-native-splash-screen 패키지 설치하기
먼저 다음 명령어를 입력하여 react-native-splash-screen 패키지를 설치합니다.
1npm install react-native-splash-screen3. Step 2 - 이미지 추가하기
다음과 같이 android/app/src/main/res/drawable 폴더에 스플래시 화면에 표시할 이미지를 추가합니다.
4. Step 3 - 스플래시 화면 생성하기
이미지를 추가한 후 android/app/src/main/res 폴더에 layout 폴더를 생성한 후 해당 폴더에 launch_screen.xml 파일을 생성한 후 다음과 같이 작성합니다.
android:background="#00B488"처럼 원하는 배경색을 지정하는 등 커스텀하면 됩니다.
또한 android:src="@drawable/solitour_logo"처럼 drawable 폴더에 추가한 이미지를 등록하면 됩니다.
예를 들어 splash_logo.png를 추가하였을 경우 @drawable/splash_logo처럼 지정하면 됩니다.
1<?xml version="1.0" encoding="utf-8"?>
2<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:orientation="vertical"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:background="#00B488">
7 <ImageView
8 android:layout_width="wrap_content"
9 android:layout_height="wrap_content"
10 android:src="@drawable/solitour_logo"
11 android:scaleType="centerCrop"
12 android:layout_centerInParent="true" />
13</RelativeLayout>5. Step 4 - MainActivity.kt 설정하기
스플래시 화면을 생성한 후 android/app/src/main/java/com/[프로젝트 명]/MainActivity.kt을 열고 다음 코드를 추가합니다.
1/* ... */
2
3import android.os.Bundle
4import org.devio.rn.splashscreen.SplashScreen
5
6class MainActivity : ReactActivity() {
7 /* ... */
8
9 override fun onCreate(savedInstanceState: Bundle?) {
10 SplashScreen.show(this)
11 super.onCreate(null)
12 }
13}6. Step 5 - App.tsx 설정하기
App.tsx 파일을 열고 다음 코드를 추가합니다. 해당 코드는 스플래시 화면이 표시된 후 앱이 준비되었을 때 스플래시 화면을 닫는 코드입니다.
1import React, { useEffect } from "react";
2import SplashScreen from "react-native-splash-screen";
3
4/* ... */
5
6export const App = () => {
7 useEffect(() => {
8 SplashScreen.hide();
9 }, []);
10
11 /* ... */
12};7. Step 6 - gradle.properties 설정하기
마지막으로 android/gradle.properties 파일을 열고 다음 코드를 추가합니다.
1android.enableJetifier=true8. 구현 예시
스플래시 화면을 구현한 예시는 다음과 같습니다.