ios splash 화면 만들기 (react-native-splash-screen 이용)

검색해보니 여러가지 방법이 있는 것 같았으나, 아래 방법으로 먼저 적용해보기로 했다. 

 

react-native-splash-screen

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

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

// ios의 경우 
cd ios && pod update
// pod update 해줘도 되고 pod install 해줘도 됨
또는 npx pod-install ios

 

Android  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 ios : AppDelegate.m 파일 수정

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

@implementation AppDelegate

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

@end

Javascript  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