Closed Arthur-Noh closed 2 months ago
mym0404
commented
4 months ago 현재 http network image가 실패하면 기본 마커로 표시되는 현상이 있긴합니다. 깜빡거리는 현상은 잘 모르겠고 마커의 이미지로 http이미지를 쓰는것은 별로 권장되지 않는 방법입니다. 각 플랫폼별 (Drawable, Bundle Image) Local Asset으로 사용하시는 것이 가장 최적화가 되어있습니다.
Arthur-Noh
commented
4 months ago http 가 아닌 로컬 이미지로도 동일한 현상이 존재합니다.
<NaverMapMarkerOverlay
key={`${item.key}`}
latitude={item.latitude}
longitude={item.longitude}
onTap={() => onClickMarker(item)}
width={80}
height={80}
// image={{
// httpUri: 'https://thumbs.dreamstime.com/b/angry-chihuahua-growling-2-years-old-14096201.jpg',
// }}
image={require('@/Assets/x.png')}
/>reproducing sample이 있을까요? 그리고 2.x 버전이 아닌 이상 지원이 어렵습니다. 2.x 구동이 안되는것은 codegen과 관련된 문제같으니 New Architecture가 활성화가 되어있고 캐시를 초기화를 한다면 실행이 되어야 할 것입니다.
mym0404
commented
4 months ago 그리고 제가 테스트했을땐 모든 마커가 즉각적으로 그려져있는 상태인데 보여주신영상에선 왜 lazy load가 되는것처럼 보이는지 잘모르겠습니다 사용법이 달라서 생긴 이슈일것같습니다. 1.5.9 버전의 old,new arch 모두 정상적으로 작동했습니다.
{generateArray(100).map((i) => (
<NaverMapMarkerOverlay
key={i}
latitude={camera.latitude - 25 + 50 * Math.random()}
longitude={camera.longitude - 25 + 50 * Math.random()}
width={40}
height={40}
image={require('./logo180.png')}
/>
))}그리고 제가 테스트했을땐 모든 마커가 즉각적으로 그려져있는 상태인데 보여주신영상에선 왜 lazy load가 되는것처럼 보이는지 잘모르겠습니다 사용법이 달라서 생긴 이슈일것같습니다.
1.5.9버전의 old,new arch 모두 정상적으로 작동했습니다.{generateArray(100).map((i) => ( <NaverMapMarkerOverlay key={i} latitude={camera.latitude - 25 + 50 * Math.random()} longitude={camera.longitude - 25 + 50 * Math.random()} width={40} height={40} image={require('./logo180.png')} /> ))}0603.mov
debounce hook
export const useDebounce = <T extends any[]>(callback: (...params: T) => void, delay: number) => {
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
return (...params: T) => {
if (timer.current) {
clearTimeout(timer.current);
}
timer.current = setTimeout(() => {
callback(...params);
timer.current = null;
}, delay);
};
};
function
const _onChangeCamera = () => {
// api 호출해서 markerlist 가져옴
}
const debounceOnChangeCamera = useCallback(
useDebounce((event: NMapCameraChangeEvent) => {
_onChangeCamera(event);
}, 300),
[width, height],
);View
<NaverMapView
ref={nMapRef}
style={{ width: '100%', height: '100%' }}
...
// 지도 이동
onCameraChanged={(event) => debounceOnChangeCamera(event)}
>
markerList.map((item, index) => (
<NaverMapMarkerOverlay
key={`${item.key}`}
latitude={item.latitude}
longitude={item.longitude}
onTap={() => onClickMarker(item)}
width={80}
height={80}
// image={{
// httpUri: 'https://thumbs.dreamstime.com/b/angry-chihuahua-growling-2-years-old-14096201.jpg',
// }}
image={require('@/Assets/x.png')}
/>
))
</NaverMapView>lazy load 되는 이유는 api 호출 후 받아온 값을 그리기 때문입니다. 카메라가 이동할 때 onCameraChanged 에 debounce 를 0.3 sec 정도 걸고, api 를 호출하여 응답받은 lat, lng Array 값을 그렸기 때문에 느리게 그려졌습니다.
Arthur-Noh
commented
4 months ago reproducing sample이 있을까요? 그리고 2.x 버전이 아닌 이상 지원이 어렵습니다. 2.x 구동이 안되는것은 codegen과 관련된 문제같으니 New Architecture가 활성화가 되어있고 캐시를 초기화를 한다면 실행이 되어야 할 것입니다.
new Architecture 활성화 후 테스트 후 말씀드리겠습니다. 확인해주셔서 감사합니다.
mym0404
commented
4 months ago 요컨대, 동적으로 marker의 리스트를 수정하면서 생기는 문제같다고 하시는것같습니다. 그부분으로 확인해보겠습니다.
mym0404
commented
4 months ago 제가 비슷한 상황을 재현해보았고 2.0.0-rc.1기준 문제는 없어보입니다.
혹시 모르니 node_modules안에서 이 패키지의 직접 objc 코드에서 setAlpha prop을 지정해주는 부분을 RNCNaverMapViewImpl.mm 에서 지우고 테스트해보시는것도 추천드립니다.
자세한 코드는 #56의 example/src/App.tsx에서 확인하실 수 있습니다.
github-actions[bot]
commented
2 months ago This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 2 days.
Is there an existing issue for this?
Version of @mj-studio/react-native-naver-map
1.5.9
Version of react-native
0.74.1
What os are you seeing the problem on?
iOS
What device types are you seeing the problem on?
Physcial Device
What architecture types of react native are you seeing the problem on?
Old Architecture(Bridge)
Version of device(android API, iOS OS version, etc...)
iOS 17
Expo App
What happened?
안녕하세요. iOS 에서 커스텀 마커 렌더링 시 네이버 기본 마커가 먼저 렌더링 된 후, 즉시 커스텀 마커로 변환됩니다.
제가 생각하는 부분으로는 (저는 objective c 를 전혀 모릅니다. 많이 무지할 수 있습니다.)
RNCNaverMapMarker의setImage함수에서 초기에alpha = 0이다가 이미지가 저장되고 나서alpha = 1로 마커를 보이도록 하는데, 지도에 render 할 때는 저장된 목록 이미지가alpha = 1로 보이는게 아닌, 아주 잠시동안 기본 마커가alpha = 1로 보입니다. 뭔가 큐에 이미지 목록을 넣으니, 일단 좌표는 있으니까 기본 마커가 alpha = 1로 노출되고, 순차적으로 이미지가 들어감에 따라서 이미지가 변경되는게 아닌가 싶습니다..제가 작성한 마커 코드는 다음과 같습니다.
발생하는 영상 https://github.com/mym0404/react-native-naver-map/assets/88483892/7b0883ec-3a1f-46a0-a641-726c181934a4
발생하는 이미지 캡처본
아 그리고 종종 아이폰 마커가 깜빡깜빡 거리는 현상이 있는데 이건 왜 그런지 알 수 있을까요?
확인해주시면 감사하겠습니다.
Relevant a package.json.
No response
Relevant log output
No response
Code of Conduct