Splash Screen을 적용하는 방법 (ios 방법 더 추가)

* 상황 - lottie가 아닌 정적인 파일(jpg, png 등)로 splash screen을 적용해야하는 상황

 

* 글쓰는 이유 - 위의 상황에서 잘 되던 게 어느 시점부터 계속 적용이 안되다가 삭제 하고 다시 만드니까 잘 되더라. (xcode에서 ios 실행할 때만 적용 안됨) 그래서 찾아보니까 수동으로 storyboard의 이름을 변경하면 연결이 풀리면서 안된다고 함. react-native-make를 쓰면서 LaunchScreen.storyboard에서 SplashScreen이 필요해서 수동으로 변경한 거였는데. 그리고 ios에서 쉽게 추가하는 방법이 있어서 정리해두려고 쓴다.

 

* 방법

1. react-native-splash-screen 설치 (터미널, 루트 폴더에서 입력 후 엔터) (자세한 내용은 여기서 참고)

// yarn의 경우
yarn add react-native-splash-screen

// npm의 경우
npm install react-native-splash-screen

 

2. 적용 환경 설정

cd ios && pod update
// pod update 해줘도 되고 pod install 해줘도 됨

 

- android : MainActivity.java 파일 열고 아래와 같이 코드 추가해준다.

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

- ios : AppDelegate.m 파일 열고 아래와 같이 코드 추가해준다.

...
#import "RNSplashScreen.h"  // 추가

@implementation AppDelegate

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

@end

- javascript : Splash 화면을 종료시키기 위해 App.js에 아래와 같이 코드를 추가해준다.

// Functional Component
import React, { useEffect } from 'react'
import SplashScreen from 'react-native-splash-screen' // 추가
...
const App = () => {
  ...
  // 추가 ---
  useEffect(() => {
    SplashScreen.hide();
  }, []);
  // ------
  ...
}

export default App;

// Class Component
...
import SplashScreen from 'react-native-splash-screen' // 추가
...
export default class WelcomePage extends Component {

	// 추가 ---
    componentDidMount() {
    	...
      SplashScreen.hide();
    }
    // ------
}

 

 

3. 스플래시 화면 만들기

- react-native-make 라이브러리 설치 (자세한 내용은 여기서 참고)

// yarn 사용
yarn add @bam.tech/react-native-make

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

 

- ios의 경우 splash 이미지를 지정해줄 환경 설정 필요

1) 프로젝트 루트에서 ios/(프로젝트명).xcworkspace를 실행하여 xcode 실행한다.

2) 좌측 사이드바에서 (프로젝트명) > (프로젝트명) 에서 오른쪽 마우스 누르고 New File - Launch Screen - Next (버튼)

3) Save As에서 SplashScreen으로 이름 변경해주고 Create(버튼)

 

- react-native-make 명령어 이용해서 splash 화면 만들기

# ios의 경우
react-native set-splash --platform ios --path [path-to-image]

# android의 경우
react-native set-splash --platform android --path [path-to-image] --resize [contain|cover|center]

# 둘 다 적용하고 싶으면
react-native set-splash --path [path-to-image] --resize [contain|cover|center] --background ["background-color"]

1) path : 이미지 경로 (./app/Assets/~~)

2) resize : contain, cover, center가 있는데 모든 이미지가 나오도록 비율을 조정하는 건 contain이다. 대신 이미지를 벗어나는 부분이 있을 수 있음. cover은 이미지가 화면에 꽉 차도록 확대하는 방법이다. 그러나 비율에 안맞으면 이미지가 잘린다. 경우에 따라 많이 잘리기도 함. center는 중앙에 이미지를 위치하는 건데 나는 contain을 사용했다.

3) background : 이미지에서 벗어난 영역에 배경색을 지정한다.

 

 

* IOS에서 더 쉽게 스플래시 화면 추가하는 방법

대신 이 방법은 이미지가 많이 필요하다. 사이즈별로 다 있어야 함.

1) 프로젝트 루트에서 ios/(프로젝트명).xcworkspace를 실행하여 xcode 실행한다.

2) 좌측 사이드바에서 (프로젝트명) > (프로젝트명) > Images 클릭

3) 중앙 창에서 좌측 사이드에서 오른쪽 마우스 클릭

4) iOS > New iOS Launch Image 클릭해서 이미지 셋을 만들어준다. (이름은 본인이 알아볼 수 있는 걸로 지정해주자. 나는 LaunchImage로 지정했다.)

5) 사이즈 파악 후 사이즈별로 스플래시 이미지 만들어서 지정해준다.

6) 좌측 사이드바에서 (프로젝트명) 두번 클릭하기

7) Build Settings에서 Asset Catalog Launch Image Set Name에 LaunchImage 값 추가

8) General에서 Launch Screen File 값 비우기

9) Info.plist 열어서 Launch screen interface file base name 값 비우기 (원래는 MainViewController)

 

 

* 출처

https://ingg.dev/rn-splash/

https://jw910911.tistory.com/95