[react-native] 앱 아이콘 및 스플래시 이미지 넣기 2

이번에는 애플리케이션을 실행하기 전에 뜨는 스플래시 이미지를 넣어 보겠습니다.

---

스플래시 이미지를 넣기 위해서는 이미지가 필요합니다.

디바이스 별로 화면 크기가 다르기 때문에 (300px, 600px @x2, 900px @x3)의 크기를 가지고 계셔야 합니다.

저는 github의 이미지를 사용해서 시작하겠습니다. github

 

스플래시 이미지

1. react-native-splash-screen를 설치

 

yarn add react-native-splash-screen

 

 

또는

 

npm install react-native-splash-screen

 

설치를 진행하시면 됩니다.

 

 

react-native 버전이 0.60 버전 이상이신 분들은 위의 코드를 통해 설치를 하시면 되지만 0.59 버전 이하이신 분들은 link를 이용해서 설치하시면 됩니다.

 

react-native link react-native-splash-screen

 

2. ios의 cocoa pods 업데이트

 

0.60버전 이상이시거나 프로젝트 내에 pods파일이 있으실 경우 설치를 하셔야 합니다.

 

cd ios && pod install && cd ..

 

3. App.js 수정

 

• 코드 편집기를 이용하여 App.js를 여시면 됩니다.
• react-native-splash-screen을 추가하시면 됩니다.

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

 

• react의 hook 중 하나인 useEffect를 추가하시면 됩니다.

import React, {useEffect} from 'react';

 

• 컴포넌트에 useEffect에 SplashScreen.hide();를 호출하시면 됩니다.

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

...

const App = () => {

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

 

 

 

IOS에 스플래시 이미지를 넣는 방법

---

우선, xcode를 열어주시면 됩니다.

커맨드 창을 통해서도 열 수 있습니다.

 

open ios/[project_name].xcworkspace

 

React Native 0.60부터 iOS 프로젝트는 cocoapod을 사용하므로 [project_name].xcodeproj가 아닌

[project_name] .xcworkspace를 열어야 합니다.

 

• [project_name] > [project_name] > Imagex.xcassets을 클릭하시면 됩니다.
• "+" 버튼을 누른 후 "New Image Set"버튼을 클릭하시면 됩니다.

 

 

• images 버튼을 클릭을 하시면 됩니다.
• 1x 2x 3x 크기에 맞게끔 스플래시 이미지를 넣어주시면 됩니다.

 

이미지 변경

 

LaunchScreen.xib 를 선택하신 후 View를 클릭하시면 됩니다. 

 

 

기존에 있는 Test / Powered by React Native를 제거하시면 됩니다.

 

• xcode 오른쪽 상단의 "+" 버튼을 클릭하시면 됩니다.
• Image View를 선택하시면 됩니다.

• 이미지 뷰를 클릭하시면 됩니다.
• 오른쪽 상단의 Image View의 Image를 클릭하셔서 'Images.xcassets'에 넣은 이미지를 선택해 주시면 됩니다.
• 'View'의 Content Mode에서 'Aspect Fit'으로 설정해주시면 됩니다.
• 하단의 버튼을 클릭을 하여 'Horizontally in Container'와 'Vertically in Container'를 선택하신 후, 'Add 2 Constraints' 버튼을 클릭하시면 됩니다.

 

xcode를 열어서 [project_name] > [project_name] > AppDelegate.m를 열어주시기 바랍니다.

 

• #import "RNSplashScreen.h"를 추가해주시면 됩니다.
• AppDelegate 메서드에서 return YES; 전에 [RNSplashScreen show];을 추가해주시면 됩니다.

 

ios 결과

 

 

Android에 스플래시 이미지를 넣는 방법

---

이제 안드로이드에 스플래시 이미지를 넣어보겠습니다.

 

디바이스 화면에 맞춰 이미지 크기를 넣어주셔야 합니다.

스플래시 이미지를 android/app/src/main/res에 넣어주시면 됩니다.

 

• mipmap-mdpi = splash_icon.png
• mipmap-hdpi = splash_icon@2x.png
• mipmap-xhdpi = splash_icon@3x.png
• mipmap-xxhdpi = splash_icon@3x.png
• mipmap-xxxhdpi = splash_icon@3x.png

이후 이름을 'splash_icon.png'으로 동일하게 변경하시면 됩니다.

 

스플래시 이미지 생성하기

• android/app/src/main/res/drawable에 background_splash.xml 파일을 생성하시면 됩니다. (만약 drawable 폴더가 없으실 경우 생성하시면 됩니다.)
• 아래의 코드를 넣으시면 됩니다.

<?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>

 

• 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>

 

"splashscreen_bg"와 "app_bg"의 경우 여러분이 원하는 RGB 색상값을 지정하시면 됩니다.

 

• android/app/src/main/res/values/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>

 

스플래시 이미지 불러오기

 

android/app/src/main/AndroidManifest.xml 파일을 여신 후, 내용을 변경하시면 됩니다.

 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.ttingdong.test">

    <uses-permission android:name="android.permission.INTERNET" />

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

      <!-- SplashActivity를 추가하시면 됩니다. -->
      <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>

      <!-- MainActivity안에 있는 intent-filter를 제거해주시고, android:exported="true"를 추가해주시면 됩니다. -->
      <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"/>

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

</manifest>

 

패키지 명은 여러분의 패키지 명으로 바꾸셔야 합니다.

 

• android/app/src/main/java/[패키지]/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();
    }
}

 

• android/app/src/main/java/[패키지]/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);
    }

  ...
}

 

 

 

• 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>

 

Android 결과

 

 

앱 아이콘과 스플래시 이미지를 넣으면서 포토샵을 많이 활용했습니다. 원하는 디자인을 만들기 위해서는 어쩔 수 없더군요...

 

앱 아이콘과 스플래시 이미지를 넣는 방법이 여러 가지가 있지만 그중 한 가지를 보여드린 것이기 때문에 다른 방법도 활용해 보시는 것을 추천드립니다!

 

이상 포스팅을 마칩니다. 감사합니다.

 

앱 아이콘 넣기 : 여기