reagieren nativ - react-native-maps initialRegion funktioniert nicht

Question

Ich integrierte Google Map für iOS-Gerät mit react-native-maps. Ich habe ein Problem, dass initialRegion nicht funktioniert, nachdem ich die Karte neu gerendert habe.

Meine Anwendung enthält nur 2 Komponenten: 10 von react-native-maps und Button. Klicken Sie auf die Schaltfläche, um die Karte ein- oder auszublenden.

Hier ist mein Code:

render() { 
    return (
     <View style={styles.mapContainer}> 
      {this.renderMap()} 
      <TouchableOpacity 
       onPress={this.onButtonPress.bind(this)} 
       style={styles.showMapButtonContainer}> 
       <Text style={styles.showMapButtonText}>Show and Hide Map</Text> 
      </TouchableOpacity> 
     </View> 
    ); 
} 

renderMap() { 
    if (this.state.showMap) { 
     return (
      <MapView 
       provider={PROVIDER_GOOGLE} 
       style={styles.map} 
       initialRegion={{ 
        latitude: 37.78825, 
        longitude: -122.4324, 
        latitudeDelta: LATITUDE_DELTA, 
        longitudeDelta: LONGITUDE_DELTA, 
       }} 
       cacheEnabled={true} 
       onRegionChangeComplete={this.onRegionChangeComplete.bind(this)} 
      > 
      </MapView> 
     ); 
    } else { 
     return <View style={styles.map}/>; 
    } 
} 

onButtonPress() { 
    this.setState({ 
     showMap: !this.state.showMap, 
    }) 
} 

onRegionChangeComplete(region) { 
    console.log("new region", region) 
} 

Zum ersten Mal laden Karte, alles perfekt funktionieren. Allerdings, wenn ich die Karte und zeigen Sie es erneut, indem Sie auf den Button verbergen machen es eine zufällige Region:

{ 
    longitude: 0, 
    latitudeDelta: 0.0004935264587338631, 
    latitude: 0, 
    longitudeDelta: 0.00027760863304138184 
} 

Ich versuchte cacheEnabled gleich true und false aber keine Hilfe. Bitte lassen Sie mich wissen, wenn Sie einen Vorschlag haben. Vielen Dank im Voraus!

Answer 1

Wenn Sie zum ersten Mal die Seite laden sie initialRegion anrufen und wenn Sie die Karte zeigen, verstecken wird es nicht wieder initialRegion Funktion aufrufen, da Karte bereits vorher geladen wird, so müssen Sie Funktion auf hide/show-Methode aufrufen und einstellen initialRegion durch die folgende Methode

this.map.setNativeProps({ region }); 

oder

this.map.animateToRegion({ 
     latitude: this.props.latitude, 
     longitude: this.props.longitude, 
     longitudeDelta: LONGITUDE_DELTA , 
     latitudeDelta: LATITUDE_DELTA 
}, 1)} 

und Sie ref={ref => { this.map = ref; } } nehmen müssen hinzufügen, so folgen in funcation erhalten Sie this.map als Referenz

  <MapView     
       ref={ref => { this.map = ref; } }     
       initialRegion={{ 
        latitude: 37.78825, 
        longitude: -122.4324, 
        latitudeDelta: LATITUDE_DELTA, 
        longitudeDelta: LONGITUDE_DELTA, 
       }} 
       onRegionChangeComplete={(region) => { **somefuncation** } }    
      >