앱 로딩 시 아이콘 및 배경색 지정

AppLoading 컴포넌트

• AppLoading 컴포넌트는 특정 조건에서 로딩 화면이 유지되도록 하는 기능으로, 렌더링 하기 전에 처리해야 하는 작업을 수행하는데 유용하게 사용됩니다.
• 렌더링(Rendering 또는 image synthesis)은 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 말한다.
• AppLoading 컴포넌트릉 통해 첫 화면이 렌더링되기 전에 이루어져야할 함수를 호출할 수 있다.

startAsync

: AppLoading 컴포넌트가 동작하는 동안 실행될 함수

onFinish

: startAsync가 완료되면 실행할 함수

onError

: startAsync에서 오류가 발생하면 실행할 함수

로딩화면과 아이콘 지정

프로젝트 생성과 함께 assets 폴더에 생성되는 splash.png파일과 icon.png 파일은 각각 로딩 화면과 애플리케이션의 아이콘으로 사용되는 이미지다.

• app.json 파일을 살펴보면 로딩화면과 아이콘 이미지를 어떤 경로에 위치한 파일을 사용하고 있는지 확인할 수 있다.
• 로딩 화면으로 사용될 이미지의 크기는 다양한 기기에 대응하기 위해 1242 * 2436으로 준비하는 것이 좋다고 한다.
• icon은 IOS의 경우 1024 1024크기가 필요하고 안드로이드의 경수 최소 512 512 크기의 이미지가 필요하다.

로딩이미지 상세설정

로딩 이미지가 변경되었지만 기기의 크기에 따라 공백이 생기는 경우가 있다. 이 때 resize Mode 혹은 backgroundColor를 이용하여 해결할 수 있다. app.json파일에서 수정하도록 한다.

• resizeMode : cover
  : 로딩 화면으로 사용하는 이미지가 화면 전체를 덮을 수 있도록 렌더링 된다.
• backgroundColor 값 변경
  : 흰색으로 나타나는 공백 부분이 지정한 색으로 렌더링 된다.