React-native：反応ネイティブマップのマーカーをクリックしないでツールチップを表示するには

Question

私はreact-native-mapsモジュールを使用しています。私はlat値とlong値を与えていて、MapView.Markerを使ってマーカーをクリックすると、マーカーとツールチップが表示されます。

しかし、マップが最初に読み込まれたときにマーカーをクリックしてツールチップを表示したいとします。

これはここに私のコードです：

<View style={styles.page}> 
     <MapView 
      ref="map" 
      style={styles.map} 
      region={this.state.region} 
      provider = {PROVIDER_DEFAULT} 
      zoomEnabled={true} 
      onRegionChange={this.onRegionChange.bind(this)} 
      pitchEnabled={true} 
      showsCompass={true} 
      liteMode={false} 
      showsBuildings={true} 
      showsTraffic={true} 
      showsIndoors={true} 
     > 
     <MapView.Marker 
     coordinate={this.state.marker.latlng} 
     title={this.state.marker.title} 
     description={this.state.marker.description} 
     image={require('./assets/pin.png')} 

    /> 

     </MapView> 
     </View> 

これを解決する方法をいずれかの助けをすることができます...

Answer 1

私が使用して私はMapViewのためのonLoad小道具の任意の並べ替えの任意のドキュメントを見つけることができませんでした代わりにsuggested hereとしてください。ツールチップを表示するにはマーカーにshowCallout methodを使用する必要があります。これを行うには、MapViewのonLayoutで使用できるマーカーの参照を追加します。

<View style={styles.page}> 
    <MapView 
     ref="map" 
     style={styles.map} 
     region={this.state.region} 
     provider = {PROVIDER_DEFAULT} 
     zoomEnabled={true} 
     onRegionChange={this.onRegionChange.bind(this)} 
     pitchEnabled={true} 
     showsCompass={true} 
     liteMode={false} 
     showsBuildings={true} 
     showsTraffic={true} 
     showsIndoors={true} 
     onLayout={() => { this.mark.showCallout(); }} 
    > 
     <MapView.Marker 
      ref={ref => { this.mark = ref; }} 
      coordinate={this.state.marker.latlng} 
      title={this.state.marker.title} 
      description={this.state.marker.description} 
      image={require('./assets/pin.png')} 
     /> 
    </MapView> 
</View> 

Answer 2

カスタムコールアウトを使用することができます。ここ https://github.com/airbnb/react-native-maps#custom-callouts

は一例です：

<MapView.Marker coordinate={marker.latlng}> 
    <MyCustomMarkerView {...marker} /> 
    <MapView.Callout> 
    <MyCustomCalloutView {...marker} /> 
    </MapView.Callout> 
</MapView.Marker> 

反応するネイティブ・マップのためのカスタムコールアウトのための例に従ってください： https://github.com/airbnb/react-native-maps/tree/master/example/examples