Change opacity of active marker in react-native-maps

Question

I am working on a react-native application with react-native-maps and I would like to have the active marker (ie the one I click on and has the callout bubble open) to have a different color than the other markers.

I was able to change the color of the current marker by saving the ref to a state and comparing it when rendering the color (our keys coming back from the server are not trustworthy, so I'm using the ref for now, until the backend developers come up with an ID in the response), but I am stumbling into the following issue:

When I click somewhere else on the map to dismiss the callout, I was not able to set the marker color back to the previous one (I want them all to be at full opacity initially, then set the "inactive" ones to 50% opacity, until the callout is dismissed).

I have gone all over the docs and examples in react-native-maps but could not find any ways of hooking the state change event to the dismiss event.

Here is the current code I have for the Marker:

      <Marker
            key={index}
            coordinate={loc.coordinate}
            ref={ref => loc.ref = ref}
            opacity={activeMarkerRef === null || activeMarkerRef === loc.ref ? 1 : 0.5}
            onPress={() => setActiveMarkerRef(loc.ref);}
          >
            <Callout
              tooltip
              style={styles.bubbleView}
            >
              <MapInfoBubble>
                <Text style={styles.bubbleTitle}>{loc.name}</Text>
                <Text>
                  <Text style={styles.descrTitle}>Address: </Text>
                  <Text>{loc.address}</Text>
                </Text>
                <Text>
                  <Text style={styles.descrTitle}>Postal Code: </Text>
                  <Text>{loc.postal_code}</Text>
                </Text>
              </MapInfoBubble>
            </Callout>
          </Marker>
        ))}
      </MapView>

Answer 1

无法将onPress属性用于MapView组件，并将选定的标记状态值重新设置为null。这样做可以重新解决您的问题