에어 비앤비 맵에서 콜 아웃을 표시하는 방법은 무엇입니까?

Question

하나의 마커가있는 정적지도가 있고 항상 마커 콜 아웃을 표시하려고합니다.

일부 사용자는 MapView의 onLayout을 사용하는 것이 좋습니다. 그러나 이것은 지금 당장은 작동하지 않습니다.

가끔은 작동하는 onRegionChangeComplete으로 해결하려고 시도하지만 약 10 %의 경우 루프에서 멈추어 앱이 다운 될 때까지 반복해서 호출됩니다. 이는 iOS에서만 발생합니다.

이 내 코드 내 접근 뭐가 잘못

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> 

어떤 생각인가? 누구든지 더 나은 해결 방법이 있습니까?

편집 : 구성 요소가 사용자 상호 작용없이 이처럼 보이길 원합니다. 지도, 마커 및 콜 아웃을 표시하기 만하면됩니다.

당신이 어떤 목적으로 지역의 변화에 ​​고정 된 맵을 렌더링하고 있기 때문에

Answer 1

, 당신은 regionChangeComplete을 청취 할 필요가 없습니다. 그것의 행동이 일관성이 없기 때문에 정말로 재미있는 일이 아닙니다.

initialRegion지도를 표시하는 데 적합합니다. 또는 더 멋진 애니메이션을 원하면 MapViewanimateToRegion을 사용해보십시오.

어쨌든 듣고 싶은 것은 componentDidMount입니다.

refs 코드가 잘못되었을 것으로 의심되지만 어쨌든이 기능은 저에게 유용합니다.

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

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

그래도 문제가 있다면, 그것은 MapView.Marker에 title 소품이 수신되지 않도록 할 수있는 address 당신이 showCallout가 호출 될 때 전달됩니다. 이 경우 콜 아웃은 렌더링되지 않습니다.

업데이트 답변 :

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