http://bit.ly/publicgallery-splash
무료 스플래쉬 아이콘
react-native-splash-screen
라이브러리를 사용하면 원하는 시점에 splash 화면을 사라지게 할 수 있다
android 디렉터리에 drawable-hdpi, drawable-mdpi, drawable-xhdpi 세 디렉터리를 모두 프로젝트의 android/app/src/main/res
경로로 이동
android/app/src/main/java/com/publicgallery<닉네임>/MainActivity.java
파일을 열어서 다음과 같이 수정
(닉네임은 소문자)
MainActivity.java
package com.publicgallery<닉네임>;
import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
import com.facebook.react.ReactActivity;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "PublicGallery<닉네임>";
}
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); // here
super.onCreate(savedInstanceState);
}
}
android/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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="false"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#6200EE"
android:gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/splash_icon" />
</RelativeLayout>
위와 같이 설정하면 splash 가 나타나고 사라지진 않는다
iOS 는 별도의 코드 수정을 하지 않아도 되도록
업데이트 되었다
Xcode로 ios/PublicGallery.xcworkspace
파일을 연 뒤
좌측 사이드바에서 Image.xcassets 를 선
아이콘을 차례대로 드래그 앤 드롭
그리고 Xcode 사이드바의 LaunchScreen.storyboard 를 선택
View Controller Scene, View Controller, View 를 펼친다
이제 Image View를 추가해줄 차례
Xcode 우측 상단의 + 버튼을 누르고
Image View 를 드래그해 SafeArea 아래에 드롭
Image View 가 화면에 나타났으면 PublicGallery<닉네임>
Powered by React Native를 선택해 지운다
Backspace 또는 Delete를 눌러 지울 수 있다
그다음엔 Image View 를 선택한 후
우측 상단의 Image 속성을
아까 추가해줬던 Image 로 설정
이미지 정렬 시
중앙 정렬은 하단의 아이콘 중 직사각형이 두 개 있는 아이콘을 누르고 Horizontally in Container 와 Vertically in Container 를 0으로 설정한 후 Add 2 Constraints 버튼을 누르면 된다
View의 배경색을 변경 시 사이드바에서 View를 선택 후
Background 속성을 누른 다음에 Custom을 선택
팔레트 상단의 두 번째 아이콘을 누르고
RGB Sliders를 선택
Hex Color #에 6200EE를 입력한 후 Enter 를 누르면 이미지의 배경색과 동일하게 색상이 설정
책에는 6200EE 로 나와있는데
5900E3 가 더 가까운듯..
작업 완료 후 Command + S 로 저장 후
npm ios 실행
만약 기존의 Splash 화면이 계속 나타난다면 iOS 시뮬레이터에서 앱을 제거하고 Metro Bundler를 종료하고 다시 yarn ios를 실행하세요. 그렇게 해도 안 될 경우에는 Xcode의 상단 메뉴 Product > Clean Build Folder를 선택한 뒤 다시 yarn ios를 실행하세요.
이 블로그가 책보다 좋다..
import SplashScreen from 'react-native-splash-screen';
useEffect(() => {
SplashScreen.hide();
}, [])