<ReactNative> iOS Splash Image 적용하기 (react-native-splash-screen)

 

아래 내용은 iOS에 대해서만 다루고 있습니다.
( android 적용은 타 블로그를 따라하면 쉽게 할 수 있기에..😂 )

 

⏰모두의 시간은 소중하니까요

react-native-splash-screen를 이용하여 iOS에 스플래쉬 이미지를 적용하였지만

계속 "LaunchScreen.storyboard" 만 노출 되는 현상이 발생하여 해결 방법을 공유합니다.

 

📖 환경

Xcode 11.5
react-native-splash-screen ^3.2.0
react-native 0.63.2

 

💾 설치

1. npm 을 통해 react-native-splash-screen 을 설치,

pod 에 라이브러리를 설치하여 주도록 합니다.

npm i react-native-splash-screen
cd ios && pod install

 

🔎 AppDelegate.m 수정

1. RNSplashScreen.h 를 import 합니다.

 

 

2. RNSplashScreen 을 보여주는 코드를 작성합니다.

 

 

📲 Splash 이미지 등록

1. 아래 그림과 같이 각 해상도에 맞게 이미지를 업로드해 줍니다.

** 런치 이미지를 등록하는 버튼이 존재 하지 않을 경우엔 아래 보이는 '+' 버튼을 통해 'LaunchImage'를 만들 수 있습니다.

 

 

💥 Splash 이미지가 나타나지 않아!

타 블로그 또는 공식 문서에 보면 위처럼만 해주면 Splash Image가 나온다고 했는데 저는 나오지 않아 한참 해맸습니다....😭

위 처럼 설정해주고 바로 나온 분들은 굳이 아래 과정을 안하셔도 됩니다!!

 

1.  프로젝트의

   Build Settings - Asset Catalog Compiler - Options 

   에서 위에 생성한 Splash Image 이름을 넣어줍니다. ( 위에서 이름을 별도로 지정해 주지 않았다면 default로 'LaunchImage' 입니다.)

 

2. 프로젝트의

   General - App Icons and Launch Images

   에서 Launch Screen File 을 공백으로 둡니다

 

 

위 설정을 마치고 다시 프로젝트를 빌드하면 Splash Image가 나타나는 것을 볼 수 있습니다 !!!😆

 

💡 마치면서...

이게 원래 안됬던 것인지 Xcode 가 업데이트 되면서 안되는 것인지 모르겠다마는 우선 해결방법을 찾아 다행이라고 생각합니다.

작성된 내용은 react-native-splash-screen 을 사용할 때 IOS 에서 Splach Image가 나타나지 않을 경우에 대한 해법으로 작성된 내용으로 부외 설명은 기술하지 않았습니다.