[RN Library ๐Ÿ“š] rn ์Šคํ”Œ๋ž˜์‹œ ์Šคํฌ๋ฆฐ 2. react-native-splash-screen

๋„๋””ยท2020๋…„ 8์›” 13์ผ
2

RN Library ๐Ÿ“š

๋ชฉ๋ก ๋ณด๊ธฐ
3/12

react-native-splash-screen ๊นƒํ—™ ๋ฐ”๋กœ๊ฐ€๊ธฐ


๋„ํ•˜!
์ด์ „ ๊ธ€์— ์ด์–ด์„œ react native ์Šคํ”Œ๋ž˜์‹œ ์Šคํฌ๋ฆฐ ์ž‘์—…ํ•˜๋Š”๊ฑธ ์ด์–ด์„œ ํ•ด๋ณธ๋‹ค.
์ €๋ฒˆ ๊ธ€ [RN Library ๐Ÿ“š] rn ์Šคํ”Œ๋ž˜์‹œ ์Šคํฌ๋ฆฐ 1. react-native-make๋กœ App, Splash ์ด๋ฏธ์ง€ ์ถ”์ถœํ•˜๊ธฐ ์—์„œ๋Š”
react-native-make ๋กœ splash screen์— ์“ฐ์ผ ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ–ˆ๋‹ค.

์˜ค๋Š˜์€ ์ƒ์„ฑํ•œ ์ด๋ฏธ์ง€๋ฅผ ํ† ๋Œ€๋กœ ํ”„๋กœ์ ํŠธ์— ์ œ๋Œ€๋กœ ์ ์šฉ์„ ํ•ด๋ณด์ž.


์šฐ์„  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•œ๋‹ค. ์ €๋ฒˆ ๊ธ€์—์„œ Android๋ถ€๋ถ„์—์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•œ ๋ถ„์ด ๊ณ„์‹œ๋‹ค๋ฉด ํŒจ์“ฐํ•ด๋„ ๊ดœ์ฐฎ๋‹ค.

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

์•„๋ž˜ ์ฝ”๋“œ๋กœ ์ž๋™ ์„ค์น˜๋ฅผ ํ•ฉ๋‹ˆ๋‹ค.

react-native link react-native-splash-screen

react-native-splash-screen์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„ 
native์ฝ”๋“œ์™€ js์ฝ”๋“œ์— ์ถ”๊ฐ€๋กœ ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ๋„ฃ์–ด์•ผ ํ•œ๋‹ค.
์—ฌ๋‹ด์ด์ง€๋งŒ, native ์ฝ”๋“œ๋ฅผ ๊ฑด๋“œ๋Š”๊ฑด ์ง„์งœ ๋ถ€๋‹ด๋˜๊ณ  ์™ ์ง€ ๋ชจ๋ฅด๊ฒŒ ์ง„๋•€๋‚œ๋‹ค..

native์ฝ”๋“œ์— ์ถ”๊ฐ€ํ•˜๋Š”๊ฑด Android, iOS์—์„œ splash screen์„ ์‹คํ–‰์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ์ด๋ฉฐ,
js์ฝ”๋“œ์— ์ถ”๊ฐ€ํ•˜๋Š”๊ฑด native์ฝ”๋“œ์—์„œ ์‹คํ–‰ํ•œ splash screen์„ ์ข…๋ฃŒ์‹œํ‚ค๊ธฐ ์œ„ํ•œ ์ฝ”๋“œ๋‹ค.

๐Ÿฅ• Android ์ฝ”๋“œ ์ถ”๊ฐ€ํ•˜๊ธฐ

android > app > src > main > java > com > [project name] > MainActivity.java

native ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

import android.os.Bundle; // here

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

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

๊ทธ๋Ÿฌ๊ณ  ํ•ด๋‹น ์œ„์น˜์— layoutํด๋”๋ฅผ ๋งŒ๋“ค๊ณ  ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ๋„ฃ์Šต๋‹ˆ๋‹ค.
android > app > src > main > res > lauout

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

๊ทธ๋Ÿฌ๊ณ  drawable- ํด๋”์— ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•  ์Šคํ”Œ๋ž˜์‰ฌ ์ด๋ฏธ์ง€๋ฅผ launch_screen.png ๋กœ ๋„ฃ์–ด๋†“๋Š”๋‹ค.

๐Ÿฅ•iOS native ์ฝ”๋“œ ์ถ”๊ฐ€ํ•˜๊ธฐ

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

iOS์—์„œ์˜ ์˜ค๋ฅ˜

profile
์ถฉ์ „์ค‘..๐Ÿค”

2๊ฐœ์˜ ๋Œ“๊ธ€

ํฌ์œผ ~ ๊พธ์ค€ํžˆ ํฌ์ŠคํŒ…ํ•˜์‹œ๋Š”๊ฑฐ ๋„˜ ๋ฉ‹์žˆ์–ด์š”! ๐Ÿ˜™ ๊นƒํ—™ followํ•˜๊ณ  ์‹ถ์–ด์š”!

1๊ฐœ์˜ ๋‹ต๊ธ€