Wie zeige ich Callouts in Airbnb-Karten an?

Question

Ich habe eine statische Karte mit einem Marker und möchte immer das Marker-Callout anzeigen.

Einige Leute raten, 's onLayout zu verwenden, aber das funktioniert seit einiger Zeit nicht mehr.

Ich versuche es mit onRegionChangeComplete zu lösen, was manchmal funktioniert (es wird einmal oder zweimal aufgerufen), aber in etwa 10% Fällen bleibt es in einer Schleife stecken und wird immer wieder aufgerufen, bis die App abstürzt. Dies geschieht nur unter iOS.

Dies ist mein Code

setMarkerRef = (ref) => { 
    this.marker = ref 
} 

showCallout =() => { 
    this.marker.showCallout() 
} 

render() { 

... 

    <MapView 
    style={{...StyleSheet.absoluteFillObject}} 
    region={{ 
     latitude: latitude, 
     longitude: longitude, 
     latitudeDelta: 0.00922, 
     longitudeDelta: 0.00421, 
    }} 
    showsMyLocationButton={false} 
    showsCompass={false} 
    showsTraffic={false} 
    zoomEnabled={false} 
    rotateEnabled={false} 
    scrollEnabled={false} 
    pitchEnabled={false} 
    onRegionChangeComplete={this.showCallout} 
    onPress={this.openMap} 
    > 
    <MapView.Marker 
     coordinate={{ 
     latitude: latitude, 
     longitude: longitude, 
     }} 
     title={address} 
     ref={this.setMarkerRef} 
    /> 
    </MapView> 

Jede Idee, was mit meinem Ansatz falsch? Hat jemand einen besseren Workaround?

Edit: Ich möchte die Komponente so aussehen, ohne die Benutzerinteraktion. Zeigen Sie einfach eine Karte, eine Markierung und ein Callout an.

Answer 1

Da Sie ohne beabsichtigte Region Änderung eine feste Karte rendern, gibt es keine Notwendigkeit für Sie zu regionChangeComplete hört. Es ist wirklich kein Spaß, mit ihm zu arbeiten, da sein Verhalten nicht so konsistent ist.

würde funktionieren, um Ihre Karte zu zeigen. Oder wenn Sie eine ausgefallenere Animation wünschen, versuchen Sie es mit animateToRegion.

Wie auch immer, alles, was Sie hören müssen, ist componentDidMount.

Ich vermute, dass Ihr Refs-Code falsch sein könnte, aber das funktioniert für mich.

componentDidMount() { 
    this.refs['mymarker'].showCallout() 
} 

render() { 
    return (
    <MapView> 
     <MapView.Marker 
     coordinate={YOUR_COORDINATES} 
     title='my callout' 
     ref='mymarker'> 
     </MapView.Marker> 
    </MapView> 
) 
} 

Wenn Sie immer noch Probleme haben, könnte es sein, dass Ihre title Stütze in MapView.Marker wird nicht mit dem address Sie vorbei in, wenn showCallout aufgerufen wurde. In diesem Fall wird der Aufruf nicht ausgeführt.

Aktualisiert Antwort: (schien wie die oben nicht für Apple Maps Arbeiten wurde)

render() { 
    return (
    <MapView 
     onLayout={() => this.refs["mymarker"].showCallout()}> 
     <MapView.Marker 
     coordinate={YOUR_COORDINATES} 
     title='my callout' 
     ref='mymarker'> 
     </MapView.Marker> 
    </MapView> 
) 
}