[React-Native] React-native Splash 화면 적용하기

React Native에서 Splash 화면을 구현하는 방법 입니다.

 

순서

1. react-native-splash-screen 라이브러리 설치

2. 파일 수정하기

 2.1 안드로이드에서 파일 수정하기

 2.2 iOS에서 파일 수정하기

3. 스플래시 이미지 만들기

4. app.js에서 스플래시 코드 추가 하기.

---

1. react-native-splash-screen 라이브러리 설치

스플래시 이미지를 구현하기 위해 react-native-splash-screen 라는 npm을 설치 합니다.

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

 

2. 소스 수정하기

 2.1 안드로이드에서 소스 수정하기

android/app/src/main/java/com/패키지명 에 있는 MainActivity.java 파일을 수정합니다.

주석으로 추가라고 작성되어 있는 부분을 추가해주면 됩니다.

package com.b2bphone;

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

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 void onCreate(Bundle savedInstanceState){
    SplashScreen.show(this); // 추가
    super.onCreate(savedInstanceState);
  }
  
  @Override
  protected String getMainComponentName() {
    return "b2bphone";
  }
}

 

2.2 iOS에서 소스 수정하기

ios/패키지명/appDelegate.m 파일을 수정합니다.

주석으로 추가라고 작성되어 있는 부분을 추가해주면 됩니다.

#import "RNSplashScreen.h" // 추가

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"b2bphone"
                                            initialProperties:nil];

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

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

 

3. 스플래시 이미지 만들기

스플래시 이미지 생성 시에는 react-native-make라는 라이브러리를 사용합니다.

아래의 커맨드로 라이브러리를 설치 합니다.

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

 

reavt-bative-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/test.jpg --resize center --background "#FFFFFF"

 

위와 같이 이미지 작성 완료 시 ios 및 안드로이드에서 모바일 디바이스의 해상돕졀 적용할 스플래시 이미지가 생성됩니다.

 

4. app.js에서 스플래시 코드 추가 하기.

App 컴포넌트에서 화면을 렌더링할 준비가 되었을 때 SplashScreen을 제거해주도록 합니다.

아래와 같이 코드를 작성해주면 됩니다.추가라고 작성한 부분과 useEffect 함수를 작성해주면 됩니다.

import React, {useEffect} from 'react'; // useEffect 추가
import type {Node} from 'react';

// 웹뷰 사용
import {WebView} from 'react-native-webview';
// SplashScreen 추가
import SplashScreen from 'react-native-splash-screen';
// 안드로이드 토스트, Backhandler, Appregistry
// import {ToastAndroid, BackHandler, AppRegistry} from 'react-native';
const App: () => Node = () => {
  useEffect(() => {
    try {
      setTimeout(() => {
        SplashScreen.hide();
      }, 2000);
    } catch (e) {
      console.warn('Error Occured');
      console.warn(e);
    }
  });
  return <WebView source={{uri: 'https://b2bphone.or.kr'}} />;
};

export default App;