sanguk.dev
작성완료
React Native 스플래쉬 화면

React Native 스플래쉬 화면

react-native-splash-screen 설치 방법과 Android 및 iOS에서 스플래시 화면을 설정하는 절차를 설명합니다. Android에서는 launch_screen.png 파일을 추가하고 layout XML을 설정하며, iOS에서는 XCode에서 이미지 세트를 추가하고 LaunchScreen.storyboard를 수정합니다. 사용법으로는 SplashScreen.hide()를 사용하여 스플래시 화면을 숨기는 방법이 포함됩니다.

React Nativereact-native-splash-screen

react-native-splash-screen

설치

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

groovy
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(
  rootProject.projectDir,
  '../node_modules/react-native-splash-screen/android'
)
java
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);
}

실행

bash
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으로 지정
shell
cd ios && pod install && cd .. && yarn ios

사용법 (Only Android)

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

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