스플래쉬 스크린

Buzz·2022년 2월 9일

React Native

목록 보기

4/6

스플래쉬 이미지
https://github.com/appstud/react-native-splashscreen-tutorial/tree/master/assets/splash_icon

1. react-native-splash-screen 설치

$ yarn add react-native-splash-screen

// or

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

2. App.js에서 hide 설정

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

...

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  useEffect(() => {
    try {
      setTimeout(() => {
        SplashScreen.hide(); {/*추가*/}
      }, 2000); {/* 스플래시 시간 조절 (2초) */}
    } catch(e) {
      console.warn('에러발생');
      console.warn(e);
    }
  });

3. android/app/src/main/res에 스플래쉬 아이콘 추가

mipmap-mdpi -> splash_icon.png
mipmap-hdpi -> splash_icon@2x.png
mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi -> splash_icon@3x.png
추가 후, 모든 파일이름은 splash_icon.png로 수정

4. android/app/src/main/res/drawable

background_splash.xml생성

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/splashscreen_bg"/>

    <item
        android:width="300dp"
        android:height="300dp"
        android:drawable="@mipmap/splash_icon"
        android:gravity="center" />

</layer-list>

5. android/app/src/main/res/values

colors.xml 생성

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splashscreen_bg">#ffffff</color> {/*스플래쉬 스크린 배경색*/}
    <color name="app_bg">#ffffff</color> {/*가장 처음에 뜨는 화면*/}
</resources>

styles.xml 수정

<resources>

    <!-- 베이스 입니다. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 여기부터 원하는 테마로 변경하시면 됩니다. -->
        <item name="android:textColor">#000000</item>

        <!-- 다음 줄을 추가하여 모든 앱의 기본 상태 표시 줄 색상을 설정하시면 됩니다. -->
        <item name="android:statusBarColor">@color/app_bg</item>
        <!-- 모든 앱의 기본 상태 표시 줄 텍스트 색상을 설정하려면 다음 줄을 추가하시면 됩니다. 
            밝은 색 => (false) / 어두운 색 => (true) -->
        <item name="android:windowLightStatusBar">false</item>
        <!-- 다음 줄을 추가하여 모든 앱의 기본 배경색을 설정하시면 됩니다. -->
        <item name="android:windowBackground">@color/app_bg</item>
    </style>

    <!-- 스플래시 화면의 정의를 추가하시면 됩니다. -->
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@color/splashscreen_bg</item>
        <item name="android:background">@drawable/background_splash</item>
    </style>

</resources>

6. android/app/src/main/AndroidManifest.xml 수정

a. intent-filter태그 삭제

b. SplashActivity태그 추가
c. MainActivity의 android:exported="true"속성 추가

<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">

        <activity
          android:name=".SplashActivity"
          android:theme="@style/SplashTheme"
          android:label="@string/app_name">
          <intent-filter>
              <action android:name="android.intent.action.MAIN" />
              <category android:name="android.intent.category.LAUNCHER" />
          </intent-filter>
        </activity>

    <!-- ... -->

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">

         <!-- 삭제 -->
         <!-- <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter> -->
       

      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

7. android/app/src/main/java/com/[package_name]

SplashActivity.java 생성

package com.ttingdong.test; // 여러분의 패키지 명으로 변경하시면 됩니다.

import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);

       Intent intent = new Intent(this, MainActivity.class);
       startActivity(intent);
       finish();
   }
}

MainActivity.java 수정

package com.ttingdong.test; //여러분의 패키지 명으로 변경하셔야 합니다.

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

public class MainActivity extends ReactActivity {

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

  ...
}

8. android/app/src/main/res/layout/launch_screen.xml추가

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_splash"
    android:orientation="vertical">
</LinearLayout>