[React Native] app아이콘, Splash 이미지 만들기 - react-native-make

React 목록

react-native-make 설치

$ npm install --save-dev @bam.tech/react-native-make

 

App 아이콘 

1024 * 1024 사이즈의 png 이미지로 아이콘을 준비합니다.

$ npx react-native set-icon --path ./src/assets/res/icon-1024.png --background "#191919"

Android와 ios에 아이콘이 사이즈 별로 생성되었습니다.

 

 

 

 

 

Splash 이미지

$ npx react-native set-splash --path ./src/assets/res/launchImage.png --resize center --background "#191919"

android와 ios에 사이즈별 splash 이미지가 생성되었습니다.

 

 

 

 

 

 

iOS splash 설정

ios/*.xcworkspace 파일을 Xcode로 엽니다.

Add File to를 선택합니다.

 

 

 

 

 

 

SplashScreen.storyboard를 선택합니다.

 

 

 

 

 

Lauch Screen File을 변경합니다.

 

 

 

 

iOS 앱이름 변경

Info.plist를 Source Code로 엽니다

 

 

 

 

...
    <key>CFBundleDisplayName</key>
    <string>앱이름</string>
...

 

 

 

 

 

 

 

 

 

Android splash 설정

react-native-make로 생성된 splash 화면은 react native Android와 호환 되지 않아서

생성된 아이콘과 splash 이미지를 제외하고

MainActivity.java등 코드 수정을 모두 GIT으로 원복시키고

별도로 설정하겠습니다.

react-native-splash-screen 설치

$ npm install react-native-splash-screen
$ npm uninstall react-native-make

react-native-make도 계속 오류나서 삭제합니다.

 

 

 

android/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/launch_screen"
    android:orientation="vertical">

</LinearLayout>

 

 

 

 

 

MainActivity.java

package com.nativetest;

...
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);
  }

  ...
}

 

 

 

 

 

React 목록