react-native-naver-map
react-native-naver-map copied to clipboard
<Marker> 컴포넌트 사용시 image 소스로 세로 해상도가 더 큰 이미지 사용시 IOS에서 잘림 현상 발생
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
이런식으로 해도 안되나요? width={image[1] ? 30 : 10} height={image[1] ? 30 : 10}
이런식으로 해도 안되나요? width={image[1] ? 30 : 10} height={image[1] ? 30 : 10}
image[1] 부분은 어떤것을 말씀하시는 건가요 ㅎ?
제가 여쭤본 질문은
<Marker width={30}, height={44}.../>
일때 안드로이드일때는 잘 표시되고, IOS일때는 길쭉하게 나오는 문제를 여쭤본 것인데
이미지는 117X174의 이미지입니다 ㅠㅠ
제가 쓰고 있는 이미지도 한번 첨부해보겠습니다.!
이미지의 픽셀을 한번 가로세로 동일하게 해보신 뒤, width={30}, height={30}으로 한번 해보시면 잘 나오실것 같습니다!

테스트해보니 정상적으로 표시가 되는데 테스트해 볼 샘플 프로젝트나 코드가 있을까요?
<Marker coordinate={P4} image={require("./pin.png")} width={45} height={57}/>
<Marker coordinate={P1} image={require("./pin.png")}/>
원본 이미지 크기는 45x57 을 사용했습니다.
width, height 설정에 따라 이미지 비율이변경되는것도 확인되는데 어느 부분이 문제인지 모르겠네요. (이미지를 네이티브에서 넣은 경우와 다른건지도 모르겠군요)