Natives Problem mit Status und initialRegion in MapView-Komponente reagieren

Question

Ich habe eine MapView, die ich versuche, Fokus auf den aktuellen Standort eines Benutzers zu haben. Im Moment protokolliere ich die Position und protokolliere den currentRegion-Status. Mein Problem ist, dass die Komponente das leere Array im Log anzeigt und nach dem Durchlaufen des Renderings den Status als Positionskoordinaten setzt, so dass die MapView mich irgendwo in der Mitte des Ozeans zeigt. Warum greift initialRegion nicht auf den geänderten Status und das Rendering zu?

const screen = Dimensions.get('window'); 
    const ASPECT_RATIO = screen.width/screen.height; 

    var LATITUDE_DELTA = 0.3022; 
    var LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; 

    class MapScreen extends Component { 
     constructor(props) { 
     super(props) 
     this.state = { 
      currentRegion: [] 
     } 
     } 

     componentDidMount() { 
     navigator.geolocation.getCurrentPosition(
      (position) => { 
      console.log(position) 
      this.setState({ currentRegion: { 
       latitude: position.coords.latitude, 
       longitude: position.coords.longitude, 
       latitudeDelta: LATITUDE_DELTA, 
       longitudeDelta: LONGITUDE_DELTA 
      }}) 
      }, 
      (error) => alert(error.message), 
      {timeout: 20000, maximumAge: 1000} 
     ) 
     } 

     render() { 
     console.log(this.state.currentRegion) 
     return(

      <View style={styles.container}> 
      <MapView 
       showsUserLocation = {true} 
       style={styles.map} 
       initialRegion={this.state.currentRegion} 
      /> 
      </View> 
     ) 
     } 
    } 

Answer 1

Die initialRegion prop nicht die Region nicht aktualisiert, wenn seine Stütze geändert wird, nachdem sie montiert wurde. Per Definition ist es nur der anfängliche Ausgangspunkt.
Dies wird in der Dokumentation unter MapView Requisiten erwähnt: https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md

Da MapView ist Montage vor Ihrem Zustand aktualisiert wird, ist es das leere Array verwendet. Verwenden Sie ComponentWillMount() anstelle von ComponentDidMount(), damit Ihre Statusänderung schneller eintritt. Wenn das nicht funktioniert, können Sie auch versuchen, die aktuelle Position im Konstruktor festzulegen.

Answer 2

initialRegion sollte ein Objekt sein. Sie haben es als Array in Ihrem Zustand behalten.

constructor(props){ 
    super(props); 
    this.state = { 
     currentRegion: { 
      latitude: LATITUDE, 
      longitude: LONGITUDE, 
      latitudeDelta: LATITUDE_DELTA, 
      longitudeDelta: LONGITUDE_DELTA, 
     } 
    } 
}