[React Native] Splash Screen 사용법 / 스플래시 LaunchImage

0. 환경

react-native: 0.61.5

react-native-splash-screen: 3.2.0

 

1. 설치

https://github.com/crazycodeboy/react-native-splash-screen

crazycodeboy/react-native-splash-screen

npm i react-native-splash-screen --save
cd ios && pod install && cd ..

auto link 지원되므로 다른거 할 필요 없음!

 

2. Plugin Configuration

2-1. Android

- MainActivity.java 에 here 부분 추가

 

Update the MainActivity.java to use react-native-splash-screen via the following changes:

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

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

onCreate 함수가 없다면 위 onCreate 함수 그대로 복붙

 

 

https://github.com/crazycodeboy/react-native-splash-screen#getting-started

crazycodeboy/react-native-splash-screen

getting-started 참고해서 스플래시 이미지 추가하기

 

 

2-2. iOS

 

Update AppDelegate.m with the following additions:

#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

 

 

 

ios/appname/Images.scassets - AppIcon 있는 빈 바탕 우클릭 - App Icons & Launch Images - New iOS Lanch Image

px에 맞게 스플래시 화면 설정 가능!

 

이제 진짜 끝!

 

 

+ 4. 라이브러리 추가는 고단한 길... 만약 실행이 안되면 이 4번을 해보길!

node_modules
package-lock.json
ios/Pods
ios/Podfile.lock

이 파일 & 폴더 다 삭제하고..

 

npm install
cd ios && pod install && cd ..

 

react-native start --reset-cache

cache도 다 지워보고 그 다음에 run 해보니 android, ios 다 잘됐다.

 

라이브러리 추가는 참 까다롭다!

 

 

4. Usage

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

// 그리고

// splash 화면을 없애고 싶은 화면 useEffect에

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

 

 

5. 에러: iOS에서 반영되지 않음

잘 따라왔다면 iOS 빌드 후 스플래시 화면이 안보일 것이다.

 

이 블로그를 참고해서 해결했다. (👍)

ddodak.tistory.com/7

iOS Splash Image 적용하기 (react-native-splash-screen)

 

블로그 캡쳐 1

블로그 캡쳐 2