[React Native] Android에서 이미지 화질 깨짐

React Native로 메인 배너에서 상세 이벤트 배너로 이동 할 때 나오는 상세이미지가 깨지는 현상이 발생했다.

 

React Native 의 <Image /> 컴포넌트는 내부에 com.facebook.fresco 라이브러리 의존성을 갖고 있다. Fresco 라이브러리는 Facebook에서 만든 안드로이드 용 이미지 라이브러리다.

이 라이브러리는 너비와 높이가 안드로이드 기기 해상도 보다 현저히 클 경우 이미지에 대해 자동으로 이미지 크기를 조절(다운샘플링) 한다.

 

 https://github.com/facebook/fresco/issues/2397

Low image quality using <Image/> component on RN > = 0.57 (Fresco >= 1.10.0) · Issue #2397 · facebook/fresco

위 자료에 따르면 Fresco 는 2048px 이상일 때 이미지를 다운샘플링을 하도록 하드코딩 되어 있다고 한다.

 

해결 방법중에 <FastImage> 를 사용하면 된다고 했는데, 사실 이번 상세 배너이미지 스크린 개발 할 때 FastImage를 써서 개발한 것인데도 불구하고 화질이 깨지는 현상이 발생했다.

 

매번 이미지 세로 길이를 2028px로 잘라서 넣을 수는 없으니 가장 편한 Webview를 이용해서 상세이미지를 불러오는 방법을 추천한다.

<STC.SafeArea>
  <STC.Container>
    <WebView style={{ flex: 1 }} source={{ uri: eventData.targetUrl }} />
  </STC.Container>
</STC.SafeArea>