study: 리네다기 | 9장 - Splash 이미지 적용

http://bit.ly/publicgallery-splash
무료 스플래쉬 아이콘

react-native-splash-screen
라이브러리를 사용하면 원하는 시점에 splash 화면을 사라지게 할 수 있다

Android

android 디렉터리에 drawable-hdpi, drawable-mdpi, drawable-xhdpi 세 디렉터리를 모두 프로젝트의 android/app/src/main/res 경로로 이동

android/app/src/main/java/com/publicgallery<닉네임>/MainActivity.java 파일을 열어서 다음과 같이 수정
(닉네임은 소문자)

MainActivity.java

package com.publicgallery<닉네임>;
import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

  /**
  * Returns the name of the main component registered from JavaScript. This is used to schedule
  * rendering of the component.
  */
  @Override
  protected String getMainComponentName() {
      return "PublicGallery<닉네임>";
  }

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

android/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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="false"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="#6200EE"
    android:gravity="center_vertical"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/splash_icon" />
</RelativeLayout>

위와 같이 설정하면 splash 가 나타나고 사라지진 않는다

iOS

iOS 는 별도의 코드 수정을 하지 않아도 되도록
업데이트 되었다

Xcode로 ios/PublicGallery.xcworkspace 파일을 연 뒤
좌측 사이드바에서 Image.xcassets 를 선

• 버튼을 누르고 Image Set 선택

아이콘을 차례대로 드래그 앤 드롭

그리고 Xcode 사이드바의 LaunchScreen.storyboard 를 선택
View Controller Scene, View Controller, View 를 펼친다

이제 Image View를 추가해줄 차례
Xcode 우측 상단의 + 버튼을 누르고
Image View 를 드래그해 SafeArea 아래에 드롭

Image View 가 화면에 나타났으면 PublicGallery<닉네임>
Powered by React Native를 선택해 지운다
Backspace 또는 Delete를 눌러 지울 수 있다

그다음엔 Image View 를 선택한 후
우측 상단의 Image 속성을
아까 추가해줬던 Image 로 설정

이미지 정렬 시
중앙 정렬은 하단의 아이콘 중 직사각형이 두 개 있는 아이콘을 누르고 Horizontally in Container 와 Vertically in Container 를 0으로 설정한 후 Add 2 Constraints 버튼을 누르면 된다

View의 배경색을 변경 시 사이드바에서 View를 선택 후
Background 속성을 누른 다음에 Custom을 선택
팔레트 상단의 두 번째 아이콘을 누르고
RGB Sliders를 선택
Hex Color #에 6200EE를 입력한 후 Enter 를 누르면 이미지의 배경색과 동일하게 색상이 설정

책에는 6200EE 로 나와있는데
5900E3 가 더 가까운듯..

작업 완료 후 Command + S 로 저장 후
npm ios 실행

만약 기존의 Splash 화면이 계속 나타난다면 iOS 시뮬레이터에서 앱을 제거하고 Metro Bundler를 종료하고 다시 yarn ios를 실행하세요. 그렇게 해도 안 될 경우에는 Xcode의 상단 메뉴 Product > Clean Build Folder를 선택한 뒤 다시 yarn ios를 실행하세요.

https://velog.io/@2ast/React-Native-ios-app-icon%EA%B3%BC-splash-screen-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

이 블로그가 책보다 좋다..

원하는 시점에 splash 화면 숨기기

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

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