REACT-NATIVE- ios Splash

1. react-native-splash-scr

yarn add react-native-splash-screen

2. cd ios/ pod install 실행

 

3. App.tsx에서 스플래쉬 종료 코드 추가해주기

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

function App() {
  React.useEffect(() => {
    try {
      setTimeout(() => {
        SplashScreen.hide(); /** 추가 **/
      }, 2000); /** 스플래시 시간 조절 (2초) **/
    } catch (e) {
      console.warn("에러발생");
      console.warn(e);
    }
  });
  return (
    <Provider store={store}>
      <AppInner />
    </Provider>
  );
}

export default App;

 

4. xcode실행

 

5. [project-name] => [project-name] => images.xcassets 에서 +를 누르고 image Set을 클릭하고 => SplashIcon을 입력

• 세 가지 사이즈의 파일을 넣을 수 있음

 

6. [project-name] => [project-name] => LaunchScreen에서 View에서 + 버튼을 누르고 이미지를 삽입한다.

• contents mode옵션은 aspect fit으로 설정
• 디바이스에 관계없이 중앙 정렬은 align에서 설정하면 된다 -> 하단에 정렬 모양 있음 

 

7. AppDelegate.m에서 코드 추가하기!

#import "RNSplashScreen.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"juwe"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  [RNSplashScreen show]; //추가하기~~~
  return YES;
}

 

=끗=

 

 

 

 

안드로이드 설정은 아래 블로그 글을 확인해볼 것 

https://ingg.dev/rn-splash/

[React Native] Splash Screen 적용하기