Skip to content

React Native Splash Screen 제작(Android)

Published: at 오전 12:00

https://velog.io/@hojin9622/React-Native-Splash-Screen-%EC%A0%9C%EC%9E%91IOS

Splash 이미지 파일을 뽑는법은 IOS에 기록하였습니다.

MainActivity.java 에 아래와 같이 코드를 넣는다.

package com.meerkat;

import android.os.Bundle;  // here

import com.facebook.react.ReactActivity;

import org.devio.rn.splashscreen.SplashScreen;  // here

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 "meerkat";
    }

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

그 후 레이아웃 폴더를 만들어준다.

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

layout 폴더에 launch_screen.xml 파일을 만들어주고 Design에서 Code로 변경해주고 위 코드를 붙여준다.

그 후 추출한 이미지를 통째로 android > app > src > main > res 폴더에 붙여넣어준다. 이 때 이미지 파일의 이름은 launch_screen 이어야 한다.

실행하면 정상적으로 작동한다.