티스토리 뷰

개발

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

woody._.k 2021. 11. 4. 12:00

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

A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.

reactnative.dev

 

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

안녕하세요! FlatList에 row마다 약 3~5개 정도의 이미지를 넣어서 사용하려고 하는데요. 처음에는 FlatList 자체 이용해서 하다가 react-native-inifite 이라는 패키지를 사용했습니다. 문제는 JS remote debuggi

reactnativeseoul.org

저작자표시 비영리

'개발' 카테고리의 다른 글

[RN] 리액트 네이티브 - 안드로이드 MainApplication cannot be cast to android.app.Activity 에러 해결 방법  (0) 2021.11.04
[JS] 바닐라 자바스크립트로 ToDo-List 만들기 - (3) 할일 목록에서 할 일 삭제, 완료 처리 구현  (1) 2021.11.04
[JS] 바닐라 자바스크립트로 ToDo-List 만들기 - (2) 할 일 추가하기  (2) 2021.11.03
[JS] 바닐라 자바스크립트로 ToDo-List 만들기 - (1) 기능정의 및 HTML/CSS  (9) 2021.11.02
[JS] Intersection Observer API 사용법과 활용  (0) 2021.10.30
댓글