React Native Splash Screen 제작(IOS)

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

사용할 라이브러리이다.

먼저 yarn add react-native-splash-screen 로 받아준 후 npx pod-install ios 까지 해준다.

그 후 위 사이트에서 2000-3000px 사이의 이미지를 넣고 추출해준다.

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

그 후 Xcode를 켠 후 AppDelegate.m 에서 위와 같이 코드 2줄을 추가해준다.

Images.xcassets의 AppIcon 하단 빈 공간에서 마우스 오른쪽 클릭 후 New Image Set 을 클릭하고 이름을 LaunchScreen으로 수정 후 추출한 이미지에서 1x 2x 3x를 찾아서 넣는다.

LaunchScreen.storyboard로 이동한다.

기존 텍스트를 모두 삭제해준다. 클릭 후 백스페이스를 누르면 삭제된다.

그 후 View 클릭 후 자 이미지를 클릭한 후 “Safe Area Layout Guide”를 체크 해제해준다.

그 후 상단의 + 버튼을 눌러 Image로 검색해서 Image View를 기존 View 하단에 넣어주고 하단의 “Add New Constraints”를 클릭 해 Constrain to margins를 체크 풀어주고 모두 0으로 맞춰준다.

그 후 Image를 LaunchScreen으로 수정하고 Content Mode는 Aspect Fill로 수정해준다.

실행하면 위와 같이 잘 나오는데 스플래시 스크린이 사라지지를 않는다.

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

React.useEffect(() => {
  SplashScreen.hide();
});

App.js 에서 위와같이 작성해주면 스플래시 스크린을 사라지게 할 수 있다. setTimeout이나 데이터를 불러와준 후 사라지게 만들면된다.

참고자료

https://blog.logrocket.com/building-a-splash-screen-in-react-native/ https://dev-yakuza.posstree.com/ko/react-native/react-native-splash-screen/