[RN] 리액트 네이티브 - Android 이미지 resizing 문제 해결

React Native에서 제공하는 코어 컴포넌트인 <Image>, <ImageBackground>를 사용하여 이미지를 로드할 수 있다. 하지만, 이미지 여러 개를 한 번에 로드하거나 이미지 자체가 큰 이미지 일 때, ios는 문제가 없었지만 android에서는 이미지가 로드되지 않은 경우가 발생하였다.

확인 결과 ios에서는 기본적으로 큰 이미지가 들어가면 자동으로 리사이징을 해주어서 문제가 없지만, android는 리사이징이 자동으로 잘 안되는 것 같다. 

android에서의 <Image> 컴포넌트는 props로 resizeMethod를 갖는다.

resizeMethod - android only

resizeMethod 속성에 대한 value로 가질 수 있는 값은 다음과 같습니다.

• auto : 휴리스틱(대충 짐작으로)하게 resize와 scale 중 선택 
• resize : 이미지가 보기보다 훨씬 클 때 사용
• scale : 이미지가 보기보다 작은 경우 사용

resizeMethod의 default 값은 'auto'로 설정되어 있는데, 'auto' 는 위의 설명과 같이 대충 짐작으로 resize와 scale을 선택하는데, 이에 따라 이미지 크기 클 경우, 이미지 로드가 되지 않을 때가 있는 것 같다.

따라서, 이러한 문제를 해결하기 위해 <Image> 컴포넌트 props에 resizeMethod에 명시적으로 'resize' 값을 주면 android에서 이미지가 나오지 않는 문제를 해결할 수 있다.

Image · React Native

FlatList 내 Image들 렉 걸리는 현상 (Android)