개발/React Native [React Native] 커스텀 로딩 애니메이션 스크린 구현하기 1. 서론 배달의 민족 등과 같은 어플을 보면 로딩 중 커스터마이징 한 로딩 화면을 볼 수 있다. 이런 화면을 만드려면 어떻게 해야 할까 생각을 하다가 직접 setInterval 함수를 사용해서 구현해봤다. 2. 결과 화면 5초 짜리 GIF 파일이어서 다소 끊기는 느낌이 나지만 실제 동작 과정은 훨씬 자연스럽다. 3. 환경 설정 react native 0.62.2 버전을 typescript와 함께 설치한다. 또한, 아래와 같은 파일 경로를 생성한다. 필요한 이미지 파일은 이 파일을 설치해서 압축을 풀어 사용하면 된다. 📦src ┣ 📂Assets ┃ ┗ 📂Images ┃ ┃ ┣ 📜0.png ┃ ┃ ┣ 📜1.png ┃ ┃ ┣ 📜10.png ┃ ┃ ┣ 📜11.png ┃ ┃ ┣ 📜12.png ┃ ┃ ┣ 📜13... 더보기 [React Native] 배경 이미지 크기 자동으로 맞추기 1. 서론 출시 준비중인 어플리케이션의 백그라운드 이미지를 설정하다가 width, height를 각각 100%로 지정했음에도 기기 해상도 별로 크기가 제각각으로 깨지는 현상이 발생했다. 이에 방법을 찾아보니 생각보다 간단하게 해결되어 이 포스팅을 작성한다. 2. 해결방법 아래의 예시 코드처럼 resizeMode="stretch" 를 적용하면 지정한 크기에 꽉 차게 배경 이미지가 생성되고 해상도에 상관 없이 깨지지 않고 유지된다. 만약, 다른 방식을 원하는 사람들은 아래의 stackoverflow 주소를 들어가면 여러 가지 해결 방법들을 볼 수 있다. import React from 'react'; import Styled from 'styled-components/native'; const Contain.. 더보기 이전 1 2 다음
