React native splash screen 적용하기

시작하기

애플리케이션을 처음실행하면 홈화면이 등장하기전에 로고가 나오는 페이지를 splash screen이라 합니다.
react native splash screen패키지를 이용해서 splash screen를 구현해보겠습니다.

설치하기

react-native v0.60 이상에서는 자동으로 링크해주기 때문에 추가로 link를 할 필요는 없습니다.

1
npm i react-native-splash-screen
1
2
3
cd ios
pod install
cd ..

npm패키지를 설치하고 ios에 패키지를 설치해줍니다.

설정하기

안드로이드에서 설정

React native프로젝트의 android폴더를 android studio로 열어줍니다.
MainActivity.java파일을 수정하겠습니다.

app/java/com.[프로젝트이름]/MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
import android.os.Bundle; // 추가!!
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // 추가!!

public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); // 추가!!
super.onCreate(savedInstanceState);
}
// ...
}

그리고 안드로이드에서 사용할 Splash 스크린을 생성해야 합니다.
res내부에 layout/launch_screen.xml을 생성하고 아래와 같이 소스를 추가합니다.

layout

res/layout/launch_screen.xml
1
2
3
4
5
6
<?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>

위에 코드를 그대로 사용하셔도 되지만 Splash 이미지 파일명이 다른 경우 android:background=”@drawable/launch_screen”의 launch_screen부분을 생성하신 이미지 파일명으로 고쳐서 사용하시면 됩니다.
자세한 내용은 react-native-splash-screen 깃헙을 참고해주시면 됩니다.

ios에서 설정

React native프로젝트의 ios폴더를 xcode로 열어줍니다.

images
launch screen

images.xcassets폴더에서 +버튼을 클릭하면, images를 생성할 수 있습니다.

이미지 넣기
다음부분에 이미지를 각각 사이즈에 맞춰서 넣어줍니다. 넣는 방법은 각각의 이미지를 드래그해서 넣으면 됩니다.
각각200x200, 400x400, 600x600 사이즈에 맞추었습니다.

Launch Screen.storyboard

프로젝트 폴더에서 Launch Screen.storyboard 파일을 만들어주도록 합니다.

파일 새로생성

새로생성하기

launch screen을 선택해서 생성합니다.
이후 screen을 수정해보겠습니다.
Launch Screen.storyboard파일을 열고 기존에 텍스트나 그런것들 다 지워줍니다.
그리고 상단의 +버튼을 클릭합니다.

이미지 추가
아이폰 홈버튼 이미지 파레트 아이콘 세개가 보이는데 그중에 이미지를 클릭하면 workspace에 추가한 이미지들이 나옵니다. 그 중에서 아까 추가해주었던 로고이미지를 끌어당기면서 아이폰모양에 가져다댑니다.
그러면 이미지가 생성이 됩니다.

생성된 이미지를 클릭한 후 오른쪽의 탭에서 뾰족한 아이콘을 클릭합니다.

이미지 사이즈
이미지의 Content ModeAspect Fit으로 설정해줍니다.

자모양의 아이콘을 클릭하고 Autoresizing을 가운데에 선만 활성상태가 되도록 클릭해줍니다.
위치지정

Launch Screen 커스텀이 완료되었습니다.

코드 수정

사용하기 위해서는 코드를 수정해주어야합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#import "AppDelegate.h"

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

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[RNSplashScreen show]; // here
//...
return YES;
}

@end

다음으로 react native에서 코드를 추가해보겠습니다.

React native

react native에서는 간단하게 적용할 수 있습니다.

App.jsx
1
2
3
4
5
6
7
8
9
10
11
//...
import SplashScreen from "react-native-splash-screen";

const App = () => {
//...
useEffect(() => {
SplashScreen.hide();
}, []);
//...
};
//...

앱 아이콘 추가하기

ios 앱아이콘을 추가하고자 할때 App icon generator 사이트에서 보유한 로고를 넣으면 자동 변환한 파일을 다운받을 수 있습니다.
그리고 xcode에서 사이즈에 맞는 이미지 하나씩 넣어주면 적용됩니다.
splash나 앱 로고가 적용이 안될시 삭제후 다시 실행해보시면 적용되는것을 확인 할 수 있습니다.

로고추가

Share