替换 React Native 地图中的标记图像

Question

我的

<Marker>

容器中有多个

<ClusteringMap>

图标。我想在

<Image>

操作上更改标记的

<Marker> onPress={locationTapped}

。但是，即使我在 Press 上强制重新渲染所有标记图像，我也不会获得更改后的

<Marker>

图像。这是我尝试过的

import ClusteringMap from 'react-native-map-clustering'
import MapView, { Marker, MapPressEvent, LatLng } from 'react-native-maps'
import homeMarkerBlue from '../../../../assets/homeMarkerBlue.png'
import homeMarker from '../../../../assets/homeMarker.png'

//... other imports

const [markerIndex, setMarkerIndex] = useState<number>(0)

const locationTapped = (e: MapPressEvent) => {
   // ...updated Array logic
   setMapData(tempProperty)
   setMarkerIndex(index)
}


const setMarkerIcon = (index: number) => {
  console.log('markerIndex:: ', markerIndex);
  console.log('index:: ', index);
  if (markerIndex === index) { // I get the expected result here, but the UI does not update onTap
    return (
      <Image
        style={styles.markerBlue}
        source={homeMarkerBlue}
      />
    )
  }
return (
  <Image
    style={styles.marker}
    source={homeMarker}
  />
 )
}


return (
<ClusteringMap mapRef={mapView} coordinates={markers} mapStyle={styles.mapContainer}>
  {markers.map((item, index) => (
    <Marker
      key={index}
      identifier={`${index}`}
      coordinate={{
        latitude: item.latitude,
        longitude: item.longitude,
      }}
      onPress={locationTapped}
    >
      {setMarkerIcon(index)}
    </Marker>
  ))}
</ClusteringMap>
)

Answer 1

这是向地图添加自定义标记的方法。

<Marker
  // description and coordinate
>
  <Image 
   source={require('../assets/images/PremiumBg.jpg')}
    style={styles.markerImage}
  />
</Marker>

参考阅读这个