我遇到了 React 本機(jī)地圖的問(wèn)題。我嘗試在地圖上放置標(biāo)記,并突出顯示按下的標(biāo)記。我不認(rèn)為這會(huì)那么棘手:)這是我渲染標(biāo)記的方式:function renderMarkers() { const shopsFiltered = shops.filter((shop) => { return shop.hasOwnProperty('latitude') && shop.hasOwnProperty('longitude') && shop.latitude && shop.longitude }); return shopsFiltered.map((shop) => { const isInWallet = cards.data.filter(card => { return card.hasOwnProperty('company') && shop.hasOwnProperty('company') && card.company.objectId === shop.company.objectId; }).length; const isCurrentMarker = shop.company.objectId === currentMarkerCardId; const latLng = { latitude: shop.latitude, longitude: shop.longitude }; return <Marker key={shop.objectId} coordinate={latLng} onPress={() => onMarkerPress(shop.company.objectId)} > {isCurrentMarker && // I had to do this, since the dimensions weren't updated using style prop... <Image source={isInWallet ? require('../assets/images/explorer/pin-on.png'):require('../assets/images/explorer/pin-off.png')} style={styles.mapMarkerCurrent } resizeMode="cover" resizeMethod="resize" /> } {!isCurrentMarker && <Image source={isInWallet ? require('../assets/images/explorer/pin-on.png'):require('../assets/images/explorer/pin-off.png')} style={styles.mapMarker} resizeMode="cover" resizeMethod="resize" /> } </Marker> }); }當(dāng)我按下標(biāo)記時(shí):function onMarkerPress(id) { setBottomBoxOpacity(1); setCurrentMarkerCardId(id);}setCurrentMarkerCardId是一個(gè) useState 鉤子,因此重新渲染視圖。這對(duì)我來(lái)說(shuō)是一個(gè)問(wèn)題,因?yàn)檎麄€(gè)地圖重新渲染(=它使地圖重新回到用戶位置的中心)并導(dǎo)致地圖滯后。但是,我看到了這個(gè)問(wèn)題,但我不知道如何在不重新渲染整個(gè)地圖的情況下更新按下的標(biāo)記值。有任何想法嗎?
反應(yīng)本機(jī)地圖在標(biāo)記按下時(shí)重新渲染
瀟瀟雨雨
2023-08-18 17:24:59