[React Native] Splash Screen 설정하기

Splash Screen이란 무엇인가?

애플리케이션 실행 시 애플리케이션의 컨텐츠의 로딩이 완료될 때까지 일시적으로 보여주는 화면을 의미한다. 

 

자 이제 splash screen을 설정해 보겠다.

 

1. 프로젝트 폴더 경로에서 터미널을 열어 아래 명령을 입력한다. 

    해당 과정은 splash screen 설정을 위한 라이브러리 설치 과정이다.

npm i react-native-splash-screen --save

 

 

2. 설치가 완료되었다면 아래 명령을 입력한다. 

      여기서 주의할 점. 본 글쓴이는 IOS를 이용하기 때문에 입력하는 것이다.

npx pod-install

 

3. App.tsx를 열어 아래와 같은 코드를 추가해 준다.

import SplashScreen from 'react-native-splash-screen';

useEffect(() => {
    if (SplashScreen) {
      SplashScreen.hide();
    }
}, []);

 

4. xcode 실행 후 해당 프로젝트의 appname.xcodeproj를 선택하여 프로젝트 파일을 연다.

     프로젝트 파일의 경로 :  프로젝트 폴더/ios/appname.xcodeproj이다.

 

 

5. 프로젝트 파일을 열었다면 프로젝트명/프로젝트명/Images를 클릭한 후 왼쪽 하단에 +버튼을 클릭한다.

 

 

6. 왼쪽의 SplashScreen을 선택하여 이미지 위치를 조정한다. 오른쪽 상단에 + 버튼을 클릭 후 이미지를 찾아 드래그하여 가져온다. 디바이스의 디스플레이 크기의 상관없이 중앙 정렬을 하기 위해서는 Horizontally in container와 Vertically in container를 체크하여 추가한다.

 

7. AppDelegate.m으로 이동해 아래와 같이 코드를 추가한다.

아래가 기존 코드라면

{
  self.moduleName = @"main";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

 

아래와 같이 코드를 추가해준다.

{
  self.moduleName = @"main";

  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  
  [super application:application didFinishLaunchingWithOptions:launchOptions];
  //SplashScreen
  [RNSplashScreen show];  // 추가
  return YES; // 추가 
}

 

모든 준비가 끝났다. 이제 xcode의 파일들을 저장한 후  npx pod-install 명령 입력 후 서버를 재실행하여 앱을 실행한다. 

그럼 정상적으로 splash screen이 나타나는 것을 볼 수 있을 것이다. 

 

❗️여기서 주의할 점❗️

만약 xcode의 파일을 수정한 후 바로 앱을 실행하면 수정된 내용이 적용되지 않은 상태에서 앱이 실행된다.

xcode에서 파일을 수정 및 저장 후  npx pod-install 명령을 실행해야  수정 사항들이 앱에 적용된다. 명심해라!