最後のマーカーをズームダウンする方法は？

Question

私はすべてがうまくいっていますが、最後にマーカを下にしてアプリをズームインするための正しいコードを見つけることができないようです。

これは私のコードです：

getEarthquakes(){  
    return fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson') 
    .then(response => response.json()) 
    .then(responseData =>{ 
     var markers = []; 
     for (var i = 0; i < responseData.features.length; i++) { 
      var coords = responseData.features[i].geometry.coordinates; 
      var marker = { 
      key: responseData.features[i].id, 
      coordinate: { 
       latitude: coords[1], 
       longitude: coords[0], 
      } 
      } 
      markers.push(marker); 
     } 

     this.setState({ 
     markers: markers, 
     loaded: true, 
     marker: markers, 
     latitude: coords[1], 
     longitude: coords[0] 
     }); 
     } 
    ).done(); 
} 


render() { 
    return (
     <View style={styles.container}> 
     <MapView.Animated 
      style={styles.map} 
      region={this.state.marker} 
      showsUserLocation={true} 
      followUserLocation={true}> 

      {this.state.markers.map(marker => (
       <MapView.Marker 
        key={marker.key} 
        coordinate={marker.coordinate} 
       /> 
      ))} 
     </MapView.Animated> 
     </View> 
    ); 
    } 
} 

私が過去30日間ですべての地震を呼び出しています。 最後のマーカーにズームさせるにはregion={this.state.marker}を置くだけだと思ったが、うまくいかなかった。マーカーを置かないアフリカの上に私を置くだけです。誰でも何ができるか知っていますか？

編集：

マイコンストラクタ/ componentWillMount：

class Additional extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     region: { 
     latitude: LATITUDE, 
     longitude: LONGITUDE, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA 
     }, 
     markers: [], 
     loaded: false 
    } 

    } 

componentDidMount() { 
    navigator.geolocation.getCurrentPosition(
     (posData) => { 
     this.setState({ 
      region: { 
      latitude: posData.coords.latitude, 
      longitude: posData.coords.longitude, 
      latitudeDelta: LATITUDE_DELTA, 
      longitudeDelta: LONGITUDE_DELTA, 
      accuracy: posData.coords.accuracy 
      } 
     }); 
     }, 
     (error) => alert(error.message), 
     {timeout: 10000} 
    ); 
    this.getEarthquakes() 
    } 

UPDATE 18-01-2018：

私はコードの一部が見つかったほとんどの月のためにそれに働いた後ではありませんミックスに悲しみを投げている。

UPDATE 18-01-2018：

私はミックスに悲しみを投げたコードの一部を発見したと思いました。しかし、コードを再練習した後で動作するようになりました。とても混乱するような。それはちょうどLihiniの鋭い目かもしれない。

Answer 1

this.state.markerはどこでも動作するように定義されていません。最初に状態を設定してみてください。

getEarthquakes(){  
    return fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson') 
    .then(response => response.json()) 
    .then(responseData =>{ 
     var markers = []; 
     for (var i = 0; i < responseData.features.length; i++) { 
      var coords = responseData.features[i].geometry.coordinates; 
      var marker = { 
      key: responseData.features[i].id, 
      coordinate: { 
       latitude: coords[1], 
       longitude: coords[0], 
      } 
      } 
      markers.push(marker); 
     } 

     this.setState({ 
      markers: markers, 
      loaded: true, 
      marker: markers[markers.length-1] // set marker state 
     }); 
     } 
    ).done(); 
} 

EDIT

お知らせこのコードピース。あなたは地域としてthis.state.markerを使用しています。

<MapView.Animated 
     style={styles.map} 
     region={this.state.marker} 
     showsUserLocation={true} 
     followUserLocation={true}> 

     {this.state.markers.map(marker => (
      <MapView.Marker 
       key={marker.key} 
       coordinate={marker.coordinate} 
      /> 
     ))} 
</MapView.Animated> 

次に、次のコードに状態として保存している内容を確認します。あなたは上記のコードに基づいてthis.state.markerを設定しなければならないのに対し、

this.setState({ 
     region: { 
     latitude: posData.coords.latitude, 
     longitude: posData.coords.longitude, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA, 
     accuracy: posData.coords.accuracy 
     } 
}); 

あなたはthis.state.regionを設定しています。したがって、上記のように変更してみてください

this.setState({ 
     marker: { 
     latitude: posData.coords.latitude, 
     longitude: posData.coords.longitude, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA, 
     accuracy: posData.coords.accuracy 
     } 
});