[RN Library 📚] rn 스플래시 스크린 2. react-native-splash-screen

react-native-splash-screen 깃헙 바로가기

---

도하!
이전 글에 이어서 react native 스플래시 스크린 작업하는걸 이어서 해본다.
저번 글 [RN Library 📚] rn 스플래시 스크린 1. react-native-make로 App, Splash 이미지 추출하기 에서는
react-native-make 로 splash screen에 쓰일 이미지를 생성했다.

오늘은 생성한 이미지를 토대로 프로젝트에 제대로 적용을 해보자.

---

우선 라이브러리를 설치한다. 저번 글에서 Android부분에서 라이브러리를 설치한 분이 계시다면 패쓰해도 괜찮다.

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

아래 코드로 자동 설치를 합니다.

react-native link react-native-splash-screen

react-native-splash-screen을 사용하기 위해선
native코드와 js코드에 추가로 코드를 붙여넣어야 한다.
여담이지만, native 코드를 건드는건 진짜 부담되고 왠지 모르게 진땀난다..

native코드에 추가하는건 Android, iOS에서 splash screen을 실행시키기 위해서이며,
js코드에 추가하는건 native코드에서 실행한 splash screen을 종료시키기 위한 코드다.

🥕 Android 코드 추가하기

android > app > src > main > java > com > [project name] > MainActivity.java

native 코드를 수정해주어야 합니다.

import android.os.Bundle; // here

import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

그러고 해당 위치에 layout폴더를 만들고 아래 코드를 붙여넣습니다.
android > app > src > main > res > lauout

<?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:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

그러고 drawable- 폴더에 내가 사용할 스플래쉬 이미지를 launch_screen.png 로 넣어놓는다.

🥕iOS native 코드 추가하기

AppDelegate.m 파일의 코드를 추가해줘야 한다.

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

iOS에서의 오류