react-native - 在选择地点制造商位置改变但地图没有根据标记位置移动

Question

我是React Native的新手，从Expo导入 MapView ，我可以更改标记位置，但相机没有聚焦在标记的新位置，地图保持静止。如果有人可以提供帮助，请帮助我觉得animateToRegion不工作

import * as React from 'react';
import MapView,{ Marker } from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions,nativeEvent, ToastAndroid } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const MapComponent = () => {

    const mapView =()=>{
        React.createRef();
    } 

    const [region, setRegion] = React.useState ({
        latitude: 22.25973582041688,
        longitude: 70.79867117106915,
        latitudeDelta: 0.4,
        longitudeDelta: 0.4,
    })
    return (
        <View style={{marginTop:30,flex:1}}>
            <MapView style={styles.map}
                initialRegion={{
                    latitude: region.latitude,
                    longitude: region.longitude,
                    latitudeDelta: 0.00922,
                    longitudeDelta: 0.00421,
                }}
                showsMyLocationButton={true}
                showsUserLocation={true}
                ref={mapView}
                // ref={component => this._map = component}
                provider="google"
          >
            <Marker 
                coordinate={{ latitude: region.latitude,longitude: region.longitude}}
                draggable = {true}
                onDragEnd = {(e) => {
                    setRegion({
                        latitude: e.nativeEvent.coordinate.latitude,
                        longitude: e.nativeEvent.coordinate.longitude
                    })
                    
                    console.log("Drag End", e.nativeEvent.coordinate)
                }}
            ></Marker>
          </MapView>
            <GooglePlacesAutocomplete
                placeholder='Search'
                fetchDetails = {true}
                GooglePlacesSearchQuery={{
                    rankby: "distance"
                }}
                onPress={(data, details = null) => {
                    // 'details' is provided when fetchDetails = true
                    // console.log(data, details);
                    setRegion({
                        latitude: details.geometry.location.lat,
                        longitude: details.geometry.location.lng,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421,
                    })
                    mapView.current.animateToRegion({ // Takes a region object as parameter
                        longitude: details.geometry.location.lng,
                        latitude: details.geometry.location.lat,
                        latitudeDelta: 0.4,
                        longitudeDelta: 0.4,
                    },1000);
                }}

                query={{
                    key: 'AIzaSyA26xfR7LTxv7FUwQbd620qFd5735Eggn8',
                    language: 'en',
                    components: 'country:IN'
                }}
                styles={{
                    container: {flex: 0,position:'absolute',width:'100%',zIndex:1},
                    listView: {backgroundColor:'white'}
                }}
            />
          
        </View>
      );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    map: {
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
    },
  });

export default MapComponent