[React Native] 앱 첫 로딩 실행 화면 (Splash 화면) 구현

1. npm 으로 설치

$ npm i react-native-splash-screen --save

www.npmjs.com/package/react-native-splash-screen

react-native-splash-screen

 

2. MainActivity.java 수정

package com.frontend;

import com.facebook.react.ReactActivity;
import android.os.Bundle;	// 추가
import org.devio.rn.splashscreen.SplashScreen;	// 추가

public class MainActivity extends ReactActivity {

  // 추가
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      SplashScreen.show(this);
      super.onCreate(savedInstanceState);
  }

  @Override
  protected String getMainComponentName() {
    return "frontend";
  }
}

 

3. app/src/main/res 에 layout 폴더를 만들고 launch_screen.xml 파일을 만든다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

 

4. splash 이미지 추가 - launch_screen.png

app/src/main/res 에 있는 폴더들에

모두 같은 이미지를 넣어준다.

 

파일이름은 무조건 'launch_screen.png' 로 해야한다. 

 

 

 

5. app/src/main/res/values/colors.xml 생성

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

 

6. 상태바 커스텀 (필수 x)

나는 splash 이미지와 동일한 색상의 상태바를 원했기 때문에 이 step 을 진행했다.

android/app/src/main/res/values/colors.xml 를 수정한다. (5에서 추가)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
    <color name="status_bar_color">원하는 색상코드</color>
</resources>

android/app/src/main/res/values/styles.xml 수정

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>

	<!-- 추가 -->
    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
        <item name="colorPrimaryDark">@color/status_bar_color</item>
    </style>
</resources>

 

7. 2번을 수정한다.

SplashScreen.show(this); 를

SplashScreen.show(this, R.style.SplashScreenTheme);

이렇게 수정!

 

 

8. App.js 수정

import React, {useEffect} from 'react';
import {Provider} from 'react-redux';
import {configureStore} from '@reduxjs/toolkit';
import rootReducer from './src/modules';
import {NavigationContainer} from '@react-navigation/native';
import StackNav from './src/navigations/Stack';
import {shoppingListApi} from './src/lib/api/shoppingList';
import SplashScreen from 'react-native-splash-screen';	// 라이브러리 추가!!

const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: shoppingListApi,
      },
      serializableCheck: false,
    }),
});

const App = () => {
	// SplachScreen hide 하는 코드 추가한다!!!!!
  useEffect(() => {
    SplashScreen.hide();
  }, []);
  return (
    <Provider store={store}>
      <NavigationContainer>
        <StackNav />
      </NavigationContainer>
    </Provider>
  );
};

export default App;

 

원래 자신의 코드에서 import 하고 App 에 useEffect 추가하면 된다.