react-native-naver-map icon indicating copy to clipboard operation
react-native-naver-map copied to clipboard

<Marker> 컴포넌트 사용시 image 소스로 세로 해상도가 더 큰 이미지 사용시 IOS에서 잘림 현상 발생

Open json91-dev opened this issue 3 years ago • 4 comments

Version of react-native-naver-map libraries

0.0.52

Version of react-native

0.61.5

Platforms you faced the error (IOS or Android or both?)

IOS

Expected behavior

Marker의 width와 height가 정상적으로 렌더링

Actual behavior

Marker를 사용할때 세로길이가 가로길이보다 더 긴 이미지를 사용했는데 안드로이드와 IOS의 출력이 에뮬레이터상에서 다르게 나옵니다.

코드는 아래와 같습니다.

<Marker coordinate={coordinate} image={getMarkerImage()} width={30} height={44} onClick={onClickMarker(store)} />

아래 스크린샷에서처럼 가로보다 세로가 더 큰 이미지를 사용하면 IOS는 마커가 잘려서 나오는 것 같습니다. 실제 이미지의 비율만큼 width와 height를 설정해도 문제가 발생합니다.

항상 가로와 세로가 같은 이미지를 마커 컴포넌트의 image 소스로 써야 하나요? 아니면 다른 방법이 있을까요?

Tested environment (Emulator? Real Device?)

Emulator iPhone 11 pro max

Screen Shot

iPhone_11_—13_3_및_Android_Emulator-Nexus_5X_API_28_5554_및__당일_목표___해야할_일-_Evernote

json91-dev avatar Jun 03 '21 18:06 json91-dev

이런식으로 해도 안되나요? width={image[1] ? 30 : 10} height={image[1] ? 30 : 10}

lazyflog avatar Jun 07 '21 03:06 lazyflog

이런식으로 해도 안되나요? width={image[1] ? 30 : 10} height={image[1] ? 30 : 10}

image[1] 부분은 어떤것을 말씀하시는 건가요 ㅎ? 제가 여쭤본 질문은 <Marker width={30}, height={44}.../> 일때 안드로이드일때는 잘 표시되고, IOS일때는 길쭉하게 나오는 문제를 여쭤본 것인데 이미지는 117X174의 이미지입니다 ㅠㅠ

제가 쓰고 있는 이미지도 한번 첨부해보겠습니다.! Notification_Center

json91-dev avatar Jun 12 '21 13:06 json91-dev

이미지의 픽셀을 한번 가로세로 동일하게 해보신 뒤, width={30}, height={30}으로 한번 해보시면 잘 나오실것 같습니다!

lazyflog avatar Jun 14 '21 04:06 lazyflog

스크린샷 2021-06-16 오후 7 05 01

테스트해보니 정상적으로 표시가 되는데 테스트해 볼 샘플 프로젝트나 코드가 있을까요?

<Marker coordinate={P4} image={require("./pin.png")} width={45} height={57}/>
<Marker coordinate={P1} image={require("./pin.png")}/>

원본 이미지 크기는 45x57 을 사용했습니다.

width, height 설정에 따라 이미지 비율이변경되는것도 확인되는데 어느 부분이 문제인지 모르겠네요. (이미지를 네이티브에서 넣은 경우와 다른건지도 모르겠군요)

QuadFlask avatar Jun 16 '21 10:06 QuadFlask