프로젝트를 생성하고 splash를 만드는데 필요한 것들을 자동으로 만들어주는 react-native-make 모듈을 설치합니다.
react-native-make 모듈을 통해 이미지를 추가하고 react-native-splash-screen 모듈을 설치하여 splash를 컨트롤 합니다.
1. npm i -D @bam.tech/react-native-make
2. splash에 쓰일 이미지를 프로젝트 내에 경로에 저장
3. 명령어 입력 - react-native set-splash --path ./Assets/images/splash.png --resize cover --background "#FFFFFF"
4. npm i react-native-splash-screen --save
5. pod install
6. 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
7. android -> MainActivity.java 에서 소스코드 추가
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
}
8. app.js에서 componentDidMount 안에 SplashScreen.hide(); 추가
import React from 'react';
import { Text } from 'react-native';
import SplashScreen from 'react-native-splash-screen'
export default class App extends React.Component {
componentDidMount() {
SplashScreen.hide();
}
render() {
return (
<Text>hello world</Text>
)
}
}
반응형
'ReactNative & Expo' 카테고리의 다른 글
| [ReactNative] 폰트 추가하기(android, ios) (0) | 2020.07.20 |
|---|---|
| [ReactNative] react-native-qrcode-svg QR코드 깨지는 문제 해결 방법 (0) | 2020.07.13 |
| [React Native] 안드로이드 에뮬레이터에서 앱이 설치되지 않는 에러 (0) | 2020.07.13 |
