[React Native] Image 컴포넌트에서 resizeMode를 사용할 때 View에 알맞은 사이즈로 포지셔닝하기

 

 

 

 

React Native

 

 

 

 

 

  React Native에서 Image 컴포넌트를 사용하면 이미지를 뷰에 맞추기 위해 resizeMode를 사용하여 일부 상위 컨테이너에 맞추게 됩니다. 하지만 때때로 resizeMode 만을 통해 상위 컨테이너에서 보여주고 싶은 부분을 완벽하게 보여주지 못하는 경우가 발생하기도 합니다. 바로 아래 예시를 살펴봅시다!

 

 

 

 

 

JSX

 

styles

 

 

 

 

 

  위와 같은 경우 item(상위 컨테이너)이 가진 영역 만큼 안에서 이미지는 상하단의 영역을 보장하여 이미지의 사이즈를 조정합니다. 하지만 이 경우 좌우영역의 빈 공간이 발생하게 됩니다.

 

 

 

 

  그렇다면 resizeMode='cover'로 바꾸면 어떻게 될까요?

 

 

 

 

  이미지의 비율에 상관없이 부모 컨테이너의 영역을 모두 덮을 수 있도록 해줍니다. 이 것은 때때로 문제를 가질 수 있는데요. 🤓 cover 속성을 통해 원본 이미지의 높이를 레이아웃에 맞춰 확대되기 때문에 이미지가 매우 확대되어 보여지는 경우가 있습니다.

 

 

 

 

 

  이때 이미지에 스케일 변환을 적용하고 중앙에서 축소하여 원하는 결과와 가까운 결과를 가질 수 있습니다.

 

 

 

 

 

 

  이미지 컴포넌트에 transform을 적용해 보세요. 아마 원하는 영역 내에서 보여주고 싶은 영역의 스케일을 조정할 수 있을거에요!