[react-native] react-native-splash-screen

 react-native-splash-screen은 React Native 애플리케이션에서 시작 화면(스플래시 스크린)을 쉽게 구현할 수 있게 도와주는 라이브러리이다.

 

이 라이브러리를 사용하면 앱이 로딩되는 동안 사용자에게 보여줄 초기 화면을 설정할 수 있으며, 앱의 로딩 경험을 개선하는 데 유용하다.

 

이 글에서는 Android와 iOS 환경에서 각각 셋팅하는 방법과 기본적인 사용 예제에 대하여 설명하려고 한다.

yarn add react-native-splash-screen

npm install react-native-splash-screen --save

---

Android 환경에서의 셋팅

1. android/app/src/main/java/[...]/MainActivity.java 파일을 열고, import org.devio.rn.splashscreen.SplashScreen;와 같이 SplashScreen을 import 한다.
2. onCreate 메소드 내에서 SplashScreen.show(this);를 추가하여 스플래시 스크린이 표시되도록 설정한다. 이는 앱이 시작될 때 스플래시 스크린이 나타나게 한다.

◎MainActivity.java

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }
}

 

1. android/app/src/main/res/layout/ 디렉토리에 launch_screen.xml 파일을 생성하고, 스플래시 스크린의 레이아웃을 정의한다.

◎ launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="false"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="#6200EE"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/splash_icon" />
</RelativeLayout>

 

이후에는 android/app/src/main/res/drawable/ 디렉토리에 스플래시 이미지(splash.png)를 추가한다.

---

iOS 환경에서의 셋팅

1. Xcode를 열고, 프로젝트의 Images.xcassets에 새로운 Image Set을 추가한다. 이 Image Set을 Splash라고 명명하고, 스플래시 스크린으로 사용할 이미지들을 추가한다.
2. AppDelegate.m 파일을 열고, #import "RNSplashScreen.h"를 추가하여 RNSplashScreen을 import 한다.
3. didFinishLaunchingWithOptions 메소드 내에 [RNSplashScreen show];를 추가하여 스플래시 스크린이 표시되도록 설정한다.

◎ AppDelegate.m

#import "RNSplashScreen.h" // 여기에 import 문 추가

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [RNSplashScreen show];
    return YES;
}

---

사용 예제

React Native 애플리케이션에서 react-native-splash-screen을 사용하는 기본 예제는 다음과 같다.

 

◎App.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import SplashScreen from 'react-native-splash-screen';

export default class App extends Component {
  componentDidMount() {
    SplashScreen.hide(); // 앱이 준비되면 스플래시 스크린을 숨긴다.
  }

  render() {
    return (
      <View>
        <Text>Welcome to React Native!</Text>
      </View>
    );
  }
}

 

이 예제에서는 앱의 componentDidMount 생명주기 메소드에서 SplashScreen.hide()를 호출하여, 앱이 로드되고 준비가 완료되면 스플래시 스크린을 숨기는 방법을 보여준다.

 

react-native-splash-screen을 통해 구현된 스플래시 스크린은 사용자에게 앱이 로딩되는 동안 보다 나은 사용자 경험을 제공하며, 앱의 전반적인 인상을 향상시킬 수 있다.