[React Native] Splash 이미지 추가하기

프로젝트를 생성하고 splash를 만드는데 필요한 것들을 자동으로 만들어주는 react-native-make 모듈을 설치합니다.

react-native-make 모듈을 통해 이미지를 추가하고 react-native-splash-screen 모듈을 설치하여 splash를 컨트롤 합니다.

 

 

1. npm i -D @bam.tech/react-native-make

 

2. splash에 쓰일 이미지를 프로젝트 내에 경로에 저장

 

3. 명령어 입력 - react-native set-splash --path ./Assets/images/splash.png --resize cover --background "#FFFFFF"

 

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

 

5. pod install

 

6. ios -> AppDelegate.m 에서 소스코드 추가 

#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

 

 

7. android -> MainActivity.java 에서 소스코드 추가

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

 

 

8. app.js에서 componentDidMount 안에 SplashScreen.hide(); 추가

import React from 'react';
import { Text } from 'react-native';
import SplashScreen from 'react-native-splash-screen'

export default class App extends React.Component {
  componentDidMount() {
    SplashScreen.hide();
  }

  render() {
    return (
      <Text>hello world</Text>
    )
  }
}