[android] splash 적용하기

1. install 하기

yarn add react-native-splash-screen

 

2. splash 화면 정의하기

• 파일 위치 : /android/app/src/main/res/layout/launch_screen.xml
• 폴더나 파일이 없으면 만들어서 동일하게 구성할 것 (우측 사진 참고)
• 배경색 등 화면 구성이 정의되어 있다. 
• ImageView 태그의 android:src="스플래시 이미지 링크" -> 해당 위치에 이미지 추가

<?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="#fff"
    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" />
</RelativeLayout>

 

3. splash 보여주기

• 파일 위치 : /android/app/src/main/java/[...]/MainActivity.java

import org.devio.rn.splashscreen.SplashScreen;

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    SplashScreen.show(this);
    super.onCreate(null)
  }

 

 

4. splash 숨기기

• 프로젝트의 App.tsx 파일 상단에 추가

  useEffect(() => {
    setTimeout(() => {
      SplashScreen.hide();
    }, 1000);
  }, []);

 

 

5. 끝!

- 안드로이드 에뮬레이터 app 재설치 후 시도해보면, splash 화면 확인할 수 있다.

 

 

 

 

 

 

참고링크)

https://til-choonham.tistory.com/530