[오류노트] android 실제 기기에서 이미지 안뜸 (feat.Naver Map)

problem

이 이슈를 처음 발견한건, 에뮬레이터에서는 Naver Marker 가 잘 나왔는데,

eas build 로 빌드 후 플레이 콘솔에 빌드파일을 올려 테스트하면,

안드로이드 기기에서만 Marker 가 렌더링 되지 않았다 ->IOS 기기에서는 마커 이미지 잘 뜸

뭔가 코드나 경로가 문제가 있는건 아닌거 같고 ... 뭘까 한참을 고민하다가....

단톡방에서 힌트를 주셨다.

에뮬레이터에서 release 모드로 실행 시켜보세요 그래도 뜨나 ? 

엇...? 그렇게 release 로 실행시켜보니, 에뮬레이터에서도 안떴다.

그럼 이제 마커가 안뜨는 이유에 조금 더 가까워 졌다 -> dev 와 release 의 차이를 알아야 했다.

 

---

Solution

1. ShrinkResources 

// android/app/build.gradle
 buildTypes {
        release {
		shrinkResources(findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)

안드로이드는 릴리즈로 실행시킬 시 shrinkResources 로 불필요한 리소스를 정리한다. ( 참조되지 않는 리소스들 )

이미지가 참조가 안되어 지워질 수 있다.

2. JS require -> URI

POTATO: require("@/assets/img/markerImg/PotatoImg.png")

const markerOverlay = (
      <NaverMapMarkerOverlay
      .
      .
      .
        isIconPerspectiveEnabled={true}
        image={POTATO} 
      />
    );

    return markerOverlay;
  };

코드를 위와 같이 넣고 있었다.

dev 는 Metro 를 실행하여 적절한 경로로 변경하여 이미지에 저장 시킨다

하지만 release 는 metro 가 실행이 안되서 이미지의 경로를 찾을 수 없던 것이었다.

const markerImageRequire = {
  POTATO: require("@/assets/img/markerImg/PotatoImg.png"),
};

export const MARKER_INFO = {
  POTATO: {
    uri: Image.resolveAssetSource(markerImageRequire.POTATO).uri,
    size: { width: 489, height: 496 },
  },
};

<NaverMapMarkerOverlay
  image={{ httpUri: MARKER_INFO.POTATO.uri }} // 네이티브가 이해 가능한 실제 경로
  >

네이티브가 이해 가능한 실제 경로로 변경하여 마커 이미지에 넣어주었더니 잘 나오게 되었다 ...