React Native 스플래쉬 화면

react-native-splash-screen

설치

yarn add react-native-splash-screen

Android

1. android/app/src/main/res/drawable 경로에 launch_screen.png 파일 생성 (1242px*2208px)

2. 아래 파일 생성
   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"
  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:layout_margin="0dp"
    android:src="@drawable/launch_screen"
    android:scaleType="fitCenter"
    android:background="#fff"
  />
</RelativeLayout>

android/settings.gradle

include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(
  rootProject.projectDir,
  '../node_modules/react-native-splash-screen/android'
)

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

// onCreate 함수가 없다면 생성
@Override
protected void onCreate(Bundle savedInstanceState) {
  setTheme(R.style.AppTheme);
  SplashScreen.show(this); // here
  super.onCreate(savedInstanceState);
}

실행

cd android && ./gradlew clean && cd .. && yarn android

iOS

종속 모듈 설치

1. XCode 실행 후 프로젝트 탐색기에 프로젝트명 클릭 후 Images.xcassets 클릭

2. AppIcon 하단 빈 곳 우클릭 New Image Set 클릭 후 이미지 드래그로 전부 추가

3. 탐색기에 LaunchScreen.storyboard 클릭

4. View Controller 클릭 후 상단 + 버튼 클릭

5. Image View 검색 후 View Controller로 드래그

6. 이미지 선택 후 Image View에 Image 선택

7. 이미지 사이즈 조정 (꽉 차도록)

8. 이미지 선택 후 View > Content Mode > Aspect Fill 선택

9. View 탭 선택 후 꽉차고, 중앙정렬 (화살표 클릭하면서)

10. Layout Margins > Fixed 선택 후 4방향 Margin 0으로 지정

cd ios && pod install && cd .. && yarn ios

사용법 (Only Android)

import { useEffect } from 'react';
import SplashScreen from 'react-native-splash-screen';

export default function App () {
  useEffect(() => SplashScreen.hide(), []);
}