Eojin Han

1) 설치 네이티브 환경의 추가 설정 안드로이드 iOS 2) 적용 파일구조 참조 1. Android 1.1 런치스크린 화면파일 생성 1.2 런치스크린에 보여질 이미지 생성 1.3 색상 추가 1.4 선택 사항 (안해도 됨)2. iOS 3) 사용법 4) 테스팅 Jest 5) 트러블슈팅 Splash screen always appears stretched/distorted 6) Contribution

안드로이드 splash-screen

ios splash-screen

1) 설치

공식 깃헙 : https://github.com/crazycodeboy/react-native-splash-screen


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

or

yarn add react-native-splash-screen

# ios
npx pod-install

링킹 생략. RN≥0.60 이후 버전이면 자동으로 됨.

네이티브 환경의 추가 설정

안드로이드

android/app/src/main/java/com/프로젝트명/MainActivity.java


package com.mobile_90;

import android.os.Bundle; // for react-native-splash-screen
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // for react-native-splash-screen

public class MainActivity extends ReactActivity {
  /**
   * 
   * SplashScreen 보이면서 시작하도록 수정
   */
  @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }

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

iOS

ios/프로젝트명/AppDelegate.m


#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

2) 적용

이제 JS파일에서 react-native-splash-screen 라이브러리를 import 하고 사용하면 됨.


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

파일구조 참조

예전에 안드로이드 프로젝트 할 때를 떠올려보자.

폴더구조를 아래와 같이 잡아놓고 했던 기억이 난다. 이걸 참조한 뒤 보면 이해가 빠름

1. Android

1.1 런치스크린 화면파일 생성

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>

그냥 단일색상 배경으로 두고 싶다면


<?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">
    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android.background="@colors/black" />
</RelativeLayout>

1.2 런치스크린에 보여질 이미지 생성

적절한 drawable 폴더 안에 launch_screen.png 파일을 만들어서 커스텀 가능.

안드로이드가 자동으로 스케일링 하므로 모든 휴대폰 기종의 densities에 대한 이미지를 준비할 필요 없다.

drawable-ldpi

drawable-mdpi

drawable-hdpi

drawable-xhdpi

drawable-xxhdpi

drawable-xxxhdpi

1.3 색상 추가

app/src/main/res/values/colors.xml

primary_dark 색상을 추가하자


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

1.4 선택 사항 (안해도 됨)

선택사항

1.4.1 splash screen이 transparent 되도록

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

windowIsTranslucnet 옵션을 true로 설정한다. 결과 파일은 아래와 같다.


<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

To learn more see examples

1.4.2 splash screen화면 출력 시 `status bar`의 색상 커스텀

android/app/src/main/res/values/colors.xml

status_bar_color 옵션을 추가하고 원하는 색상을 기입 해두자.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="status_bar_color"><!-- Colour of your status bar here --></color>
</resources>

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

colors.xml에 기입한 색상을 가져와서 스타일을 정의해 두자.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
        <item name="colorPrimaryDark">@color/status_bar_color</item>
    </style>
</resources>

정의한 스타일을 show 메소드 호출 시 스타일을 지정해주면 된다.


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

2. iOS

splash screen 화면 커스텀은 LaunchScreen.storyboard 또는 LaunchScreen.xib 파일 수정하면 됨.

Learn more to see examples

via LaunchScreen.storyboard Tutorial

3) 사용법

react-native의 js 코드에서 활용하는 방법


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

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

api

Method

Type

부가 설명

show()

function

Open splash screen (Native Method)

hide()

function

Close splash screen

4) 테스팅

Jest

For Jest to work you will need to mock this component. Here is an example:


// __mocks__/react-native-splash-screen.js
export default {
  show: jest.fn().mockImplementation( () => { console.log('show splash screen'); } ),
  hide: jest.fn().mockImplementation( () => { console.log('hide splash screen'); } ),
}

5) 트러블슈팅

Splash screen always appears stretched/distorted

Add the ImageView with a scaleType in the launch_screen.xml, e.g.:


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

6) Contribution

Issues are welcome. Please add a screenshot of you bug and a code snippet. Quickest way to solve issue is to reproduce it in one of the examples.

Pull requests are welcome. If you want to change the API or do something big it is best to create an issue and discuss it first.

react-native-splash-screen 설치 방법