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 > 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 ๋ก ๋ฃ์ด๋๋๋ค.
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
ํฌ์ผ ~ ๊พธ์คํ ํฌ์คํ ํ์๋๊ฑฐ ๋ ๋ฉ์์ด์! ๐ ๊นํ followํ๊ณ ์ถ์ด์!