resizeMode는 총 5가지 값으로 설정할 수 있습니다.
• cover: resizeMode를 따로 설정하지 않으면 이 값을 기본값으로 지정합니다. 이 옵션은 이미지의 가로 세로 비율을 유지한 상태로 이미지를 리사이징합니다. 이미지와 뷰의 가로 세로 비율이 일치하지 않을 경우 이미지의 일부분이 잘립니다.
• contain: 이미지의 가로 세로 비율을 유지한 상태로 이미지를 리사이징하며 이미지의 모든 영역이 뷰 안에 보이게 합니다.
• stretch: 뷰의 크기대로 이미지를 리사이징합니다. 이 과정에서 이미지의 가로 세로 비율이 원본과 달라질 수 있습니다.
• repeat: 뷰의 크기가 이미지의 크기보다 크면 바둑판식으로 이미지를 반복합니다.
• center: 이미지를 뷰 중앙에 둡니다. contain과 마찬가지로 이미지의 모든 영역이 뷰 안에 보이게 합니다. 단, 뷰가 이미지보다 크면 이미지의 크기가 커지지 않고 원본 사이즈를 유지합니다.
설명만 봤을 때는 이해하기 어려울 수 있습니다. 이해하기 쉽도록 직접 resizeMode 값을 바꿔보면서 결과를 확인해봅시다. 그 전에 image 스타일에 다음과 같이 배경색을 지정하면 실제 뷰의 크기를 시각적으로 파악할 수 있으니 스타일을 다음과 같이 설정하세요.
image: { width: 300, height: 200, backgroundColor: 'gray', },