본문 바로가기
웹 프론트엔드/React-Native

React Native : splash 화면 적용하기

by 번데기 개발자 2021. 5. 25.
반응형

React Native에서 데모 앱을 만드는데 Splash를 구현해야 할 일이 생겼습니다.

 

React Native에서 splash를 적용하는 방법에 대해 알아보겠습니다.

 

1-1) Splash 구현을 위한 준비 단계  (Android)

 

React Native에서 Splash를 구현하기 위해서는 react-native-splash-screen 라는 npm 라이브러리를 사용하는 것이 편리합니다.

 

1.  react-native-splash-screen 라이브러리 설치 (공통)

 

npm i react-native-splash-screen --save

 

2. android/app/src/main/ 맨 하단에 있는 MainActivity.java 파일 수정하기 (Android)

package com.lottoproject;

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen; // 추가
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this, R.style.SplashScreenTheme); // 추가
        super.onCreate(savedInstanceState);
    }
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "LottoProject";
  }
}

위에서 주석으로 추가 라고 된 부분을 코드에 넣어줍니다.

 

 

1-2) Splash 구현을 위한 준비 단계  (IOS)

 

1.  react-native-splash-screen 라이브러리 설치 (공통)

npm i react-native-splash-screen --save

 

2. XCode를 열고 프로젝트 우클릭 > New File... > Launch Screen > Save as: SplashScreen 작업을 진행합니다.

 

xcode 작업 1
xcode 작업 2

 

Xcode 작업 3


3. AppDelegate.m 파일 수정하기 (IOS)

#import "RNSplashScreen.h" // 추가

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"LottoProject"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  [RNSplashScreen show]; // 추가

  return YES;
}

위에서 주석으로 추가라고 된 부분을 코드에 넣어줍니다.

 

 

2. Splash 이미지 만들기

react-native-splash-screen을 통한 역할은 단순하게 스플래시를 쓸 수 있는 환경을 만들어 주는 역할입니다. 

 

우리는 앞에서 앱이 켜지면 스플래시가 동작할 수 있도록 안드로이드와 IOS에서 설정을 모두 하였습니다. 

 

따라서 이제는 스플래시 이미지를 만들어야 합니다.

 

1. react-native-make 설치하기

 

이미지를 만들때는 react-native-make 라는 라이브러리를 사용합니다.

 

아래와 같이 react-native-make 라이브러리를 설치합니다.

 

npm install --save-dev @bam.tech/react-native-make

 

 

2. react-native-make로 스플래시 이미지 만들기

 

명령어는 다음과 같습니다.

 

# react-native set-splash --path [path-to-image]
# react-native set-splash --path [path-to-image] --resize [contain|cover|center]
react-native set-splash --path [path-to-image] --resize [contain|cover|center] --background ["background-color"]
  • path
    • 이미지 경로
  • resize
    • contain : 모든 이미지가 나오도록 비율 조정 (한쪽 비율에 맞추기 때문에 하얀 영역이 나올 수 있음)
    • cover : 이미지가 화면에 꽉 차도록 확대 (비율에 안 맞으면 이미지의 일부가 나오지 않음)
    • center : 중앙에 이미지 위치
  • background
    • 이미지가 채워지지 않은 하얀 영역의 배경색 지정

 

 

예시

react-native set-splash --path ./src/Assets/images/splash.jpg --resize center --background "#FFFFFF"

 

 

위와 같이 react-native-make 명령을 이용하여 React-Native에서 Splash 이미지를 선언하면 IOS / Android 에서 모바일 디바이스의 해상도별로 적용할 스플래시 이미지가 생성됩니다.

 

 

3. useEffect에 스플래시 코드 추가하기

Android / IOS 설정이 끝나면 기본적으로 앱이 시작될때 스플래시 화면이 보이게 됩니다.

 

따라서 이제는 마지막으로 최상위 App 컴포넌트에서 아래와 같이 화면을 렌더링할 준비가 되었을 때  SplashScreen을 hide() 함수를 이용해서 화면에서 제거해주시면 됩니다.

 

import Root from './screen/RootNavigator';
import React, {useEffect} from 'react';
import SplashScreen from 'react-native-splash-screen'; /** 추가 **/

const App  = () => {
  useEffect(() => {
    try {
      setTimeout(() => {
        SplashScreen.hide(); /** 추가 **/
      }, 2000); /** 스플래시 시간 조절 (2초) **/
    } catch(e) {
      console.warn('에러발생');
      console.warn(e);
    }
  });
  
  return (
    <Root/>
  );
};

export default App;

 

단순하게 SplashScreen.hide() 만 호출하게 되면 Splash가 노출되는 시간이 너무 짧을 수가 있습니다. 

 

그럴 때는 위에서처럼 setTimeout과 같은 함수를 이용해서 Splash가 보여질 시간을 원하는 데로 조절하실 수 있습니다.

 

 

 

참고

 

react-native-splash-screen github 주소

react-native-splash-screen 전체 과정 설명 잘 되어 있는 글

react-native-make 설명 잘되어 있는 글

set splash 사용법

 

react natvie make 공식 github

 

 

 

반응형