[RN] 스플래시 스크린 적용

준비물

1. 1080x1920 크기의 스플래시 스크린 이미지를 준비하고 파일명을 launch_screen 으로 변경해준다.

2. 스플래시 스크린 이미지를 여러 크기로 생성할 수 있는 제너레이터 사이트를 통해 이미지를 생성해준다.

3. 이미지를 생성하게 되면 다음과 같은 구조로 이미지가 생성되는것을 확인할 수 있다.

iOS

1. ios/[프로젝트명]/AppDelegate.mm 파일 수정

2. ios/[프로젝트명].xcworkspace 을 실행 후 [프로젝트] - images - New Image Set

3. 이름을 launch_screen 으로 변경해준 뒤, 각각의 크기에 맞게 제너레이터를 통해 생성한 이미지 적용

4. LaunchScreen 탭으로 이동 후 불필요한 텍스트 및 항목 제거

5. View 탭에서 우측의 Safe Area 체크 해제

6. 우측 상단에 + 버튼 클릭 후 image 검색 후, 검색 결과 드래그

7. 하단 아이콘을 통해 위치 속성을 변경해준다.

8. 우측 메뉴에서 이미지 적용, view - Aspect Fill 선택

9. LaunchScreen 적용

Android

1. MainActivity.java 파일에 코드를 추가
(android/app/src/main/java/com/[프로젝트명]/MainActivity.java)

2. app/src/main/res/layout 폴더에 launch_screen.xml 을 생성 후 코드를 작성

3. app/src/main/res 폴더에 제너레이터를 통해 생성한 안드로이드 이미지를 폴더째로 추가

4. app/src/main/res/values 폴더에 colors.xml 파일을 생성

5. App.tsx 파일 수정

GitHub - crazycodeboy/react-native-splash-screen: A splash screen for react-native, hide when application loaded ,it works on iOS and Android.

A splash screen for react-native, hide when application loaded ,it works on iOS and Android. - GitHub - crazycodeboy/react-native-splash-screen: A splash screen for react-native, hide when applicat...

https://github.com/crazycodeboy/react-native-splash-screen

Splash Screen | React Native | IOS/Android

In this tutorial, I'll show you how to create a splash screen for your React Native app in just a few minutes. This tutorial is perfect for beginners who want to learn how to create a splash screen in React Native using the latest React Native technology. By the end of this tutorial, you'll be able to create a splash screen that looks fantastic on both iOS and Android devices! You can also visit my website https://devinfo.xyz/react-native-splash-screen/ Website: https://devinfo.xyz/start Instagram: https://www.instagram.com/devinfo_ Buy me a coffee: https://www.buymeacoffee.com/devinfo

https://www.youtube.com/watch?v=-geFlTAIUAk&ab_channel=CodingwithArtem