Google Play Console에 앱을 테스트 하는 과정에서, 사전 출시 보고서에 아래와 같은 경고가 떴다.
이중 스플래시 화면..
단어 자체가 생소한데, 앱을 구동시 첫 화면이 로드 되기 전에 보여지는 화면을 말한다.
상용 앱들을 켜보면 대부분 그 앱이나 회사의 로고가 일정시간 떠있는 그 화면 말이다.
문제는 내 앱에서는 스플래시 화면을 설정한 적이 없기에
아이콘 이후 빈 로딩 화면이 뜨는데 이게 UX를 해칠수 있기에 경고를 하는 것이다.
그럼 이제 문제가 있음을 알았으니 해결을 해보자.
react-native-splash-screen 이라는 라이브러리를 사용이 가능하다.
라이브러리 설치
npm i react-native-splash-screen --save
Android native 설정
- MainActivity.java 수정
사용하는 react native 버전에 따라 .java가 아니라 코틀린 파일일 수도 있고, 폴더 경로가 조금씩은 다른 듯 하다.
나의 경우 android/app/src/main/java/com/프로젝트명/MainActivity.java
import org.devio.rn.splashscreen.SplashScreen;
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);
super.onCreate(savedInstanceState);
}
}
위와 같이 MainActivity 내부에 SplashScreen.show(this); 를 포함한 onCreate를 넣어준다.
주의사항: this가 가리키는게 MainActivity이어야 한다.
무슨 소리냐고? 당연히 저렇게 썼으면 this가 가리키는게 MainActivity 아니냐고?
맞다. 그런데 나는 onCreate를 사용하고 있는 부분이 이미 있었기에 바로 SplashScreen.show(this); 를 추가해주었고,
컴파일시에 오류를 만났다.
기존에 존재하던 onCreate는 MainActivity 안에 있는 MainActivityDelegate 안에서 선언을 한 onCreate이다.
즉, 여기서 가리키는 this는 MainActivityDelegate이기 때문에 오류가 발생.
onCreate가 이미 선언되어 있더라도, MainActivity 바로 하위에 선언된 것인지 아닌지 잘 확인한 후 추가해줘야 한다.
이미지 파일 삽입
사용하고자 하는 화면 이미지를 만들어서 android/app/src/main/res/drawable에 넣어준다. (나는 logo.png 사용)
이미지를 스플래시 화면에서 어떻게 구성할 것인지 정의하는 lanuch_screen.xml을 만든다.
-> 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:gravity="center">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo"
android:scaleType="centerInside"
android:layout_centerInParent="true" />
</RelativeLayout>
위와 같이 하고 npm run android를 실행하면 스플래시 화면이 뜨는 것을 확인할 수 있다.
근데 사라지지는 않아서 앱 이용이 불가할 것이다.
스플래시 화면이 얼마동안 떠있고 사라지게 할지는 react native 단에서 설정하면 된다.
// App.js
import { useEffect } from 'react';
import SplashScreen from 'react-native-splash-screen';
const App = () => {
useEffect(() => {
setTimeout(() => {
SplashScreen.hide();
}, 1000);
});
return (
...
)
}
참고 자료