https://github.com/crazycodeboy/react-native-splash-screen
사용할 라이브러리이다.
먼저 yarn add react-native-splash-screen
로 받아준 후 npx pod-install ios
까지 해준다.
https://appicon.co/#image-sets
그 후 위 사이트에서 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/