9.10.1 안드로이드에 Splash 화면 적용하기

먼저 안드로이드부터 Splash 화면을 적용해봅시다. 방금 내려받은 파일의 압축을 풀면 android 디렉터리에 drawable-hdpi, drawable-mdpi, drawable-xhdpi 디렉터리가 있을 겁니다. 세 디렉터리를 모두 프로젝트의 android/app/src/main/res 경로로 이동시키세요.

다음으로 android/app/src/main/java/com/publicgallery<닉네임>/MainActivity.java 파일을 열어서 다음과 같이 수정해주세요. <닉네임>은 소문자로 적어주세요.

MainActivity.java

package com.publicgallery<닉네임>;
import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

  /**
  * Returns the name of the main component registered from JavaScript. This is used to schedule
  * rendering of the component.
  */
  @Override
  protected String getMainComponentName() {
      return "PublicGallery<닉네임>";
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);  // here
    super.onCreate(savedInstanceState);
  }
}

그리고 android/app/src/main/res/layout 경로를 만들고 그 안에 launch_screen.xml 파일을 생성하세요. 그리고 다음 코드를 작성하세요.

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"
    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>

안드로이드에서는 위와 같이 XML 형태로 뷰를 선언하는데, 안드로이드를 다뤄본 적이 없다면 이 코드가 낯설 것입니다. 이 코드에서는 우리가 추가한 @drawable/splash_icon 이미지를 화면에 보여준 뒤, 해당 이미지를 화면의 정중앙에 나타나게 했습니다. 그리고 화면의 배경색을 보라색(#6200EE)으로 설정해줬습니다.

안드로이드의 레이아웃 시스템이 어떻게 작동하는지 알아보고 싶다면 다음 링크를 참조하세요.

• http://bit.ly/android-layout-docs

이제 안드로이드에서 yarn android 명령어로 앱을 다시 실행해보세요. 앱이 시작될 때 다음과 같이 Splash 화면이 나타났나요?

▲ 그림 9-26 Android Splash 화면

현재 안드로이드에서 Splash 화면이 나타나고 사라지지 않을 텐데요. 이 화면을 사라지게 하는 작업은 iOS에 마저 Splash 화면을 적용하고 처리하겠습니다.