ReactNative, 앱 진입화면 설정 (splash screen)

대부분의 성행하는 앱들은

앱 실행시 진입 화면이 있다.

 

그것이 광고성 이미지가 될수도있고

앱을 간략히 소개하는 이미지가 될수도 있다.

 

우리도 앱개발을 하다보면

반드시 넣을수밖에 없는 기능이라고 봐야한다.

 

준비물

1. react-native-splash-screen

2. @bam.tech/react-native-make

 

// splash-screen
npm install react-native-splash-screen
or
yarn add react-native-splash-screen


// helper
npm install --save-dev @bam.tech/react-native-make
or
yarn add npm --dev @bam.tech/react-native-make

 

@bam.tech/react-native-make는 설치시

설정할것은 따로없다.

 

react-native-splash-screen은 문서에 따르면

무언가 많이 설정해줘야하지만

그것을 따르지말고

아래의 가이드라인만 따라서 해보자

 

// android/app/src/main/java/com/[projectName]/MainActivity.java

...
import org.devio.rn.splashscreen.SplashScreen;
...

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashScreenTheme); // 여기 추가
    super.onCreate(savedInstanceState);
  }

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "ProjectName";
  }
}

 

...
#import "RNSplashScreen.h"
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  ...
  
  [RNSplashScreen show];
  return YES;
}

 

헬퍼로 이미지 변환해서 splash file 설정하는 스크립트 추가

// 사용방법: react-native set-splash --path [path-to-image] --resize [contain|cover|center] --background ["background-color"]
// NOTE: 이렇게 스크립트를 만들어두면 잊어버릴일도 없고, 이미지나 배경색상을 바꿀때 이 스크립트만 수정해주면 된다
// package.json

"scripts": {
  ...
  "splash": "react-native set-splash --path [image path] --background ['color'] --resize contain"
}

스크립트를 실행시켜보자

npm run splash

 

마지막으로, 실행된 스크립트가

앱 실행후 자동으로 닫히도록

코드를 추가

// project root - index.js or app.js

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

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


or 

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