MapView 不会在 React Native 中更改坐标时滚动

问题描述

我想通过单击“定位我”按钮来更改我的地图位置，“定位我”获取我的当前坐标并设置为反应状态。但问题是，通过单击“定位我”按钮，我的地图位置不会改变，而我的标记位置已更改

点击“定位我”按钮之前的图片

点击“定位我”按钮后的图像，这里我的制造者移动到当前坐标但地图仍然在相同的位置（即旧坐标）

// Location Component
import React,{ Component,Fragment } from 'react';
import { View,Text,StyleSheet,TextInput,KeyboardAvoidingView,Modal,Image,TouchableOpacity,ScrollView,Dimensions } from 'react-native';
import { Icon,Button } from 'react-native-elements';
import * as Permissions from 'expo-permissions';
import MapView from 'react-native-maps';
import LocationIQ from 'react-native-locationiq';
import { Ionicons } from '@expo/vector-icons';

const { width,height } = Dimensions.get('window');

class LocationComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 23.0759837,longitude: 72.8776559,latitudeDelta: 0.0922,longitudeDelta: 0.0421
      }
    }
    this.onRegionChange = this.onRegionChange.bind(this);
    this.currentLocation = this.currentLocation.bind(this);
  }

  currentLocation = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    var finalStatus = status;
    while (finalStatus !== 'granted') {
      let { stat } = await Permissions.askAsync(Permissions.LOCATION);
      finalStatus = stat
    }
    if (finalStatus == 'granted') {
      let lat;
      let long;
      navigator.geolocation.getCurrentPosition((position) => {

        lat = position.coords.latitude;
        long = position.coords.longitude;

        if (lat && long) {
          const region = {
            latitude: lat,longitude: long,longitudeDelta: 0.0421
          }
          this.setState({ region: region });
        }
      },(error) => {
        console.error("Error Code = " + error.code + " - " + error.message);
      });
    }

  }
  onRegionChange(region) {
    this.setState({ region });
  }

  render() {
    return (
      <KeyboardAvoidingView>
          
        <ScrollView style={{ flexDirection: 'column' }}>
          <View style={{ height: 680,paddingTop: 30 }}>
            <MapView
              style={{
                flex: 1
              }}
              initialRegion={this.state.region}
              zoomEnabled={true}
              scrollEnabled={true}
              showsScale={true}
              showsUserLocation={true}
              showsMyLocationButton={true}
              showsScale={true}
              showsCompass={true}
              loadingIndicatorColor="blue"
              onRegionChange={() => this.onRegionChange()}
              onMapReady={this.onMapReady}
              onRegionChangeComplete={this.onRegionChange}
            >
              <MapView.Marker
                coordinate={{
                  latitude: this.state.region.latitude,longitude: this.state.region.longitude,}}
                title={"Location"}
                draggable />
            </MapView>
            <TouchableOpacity activeOpacity={0.5} onPress={this.currentLocation} style={styles.TouchableOpacityStyle} >
              <Ionicons name="md-locate" size={24} color="red" />
            </TouchableOpacity>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  TouchableOpacityStyle: {

    position: 'absolute',width: 50,height: 50,alignItems: 'center',justifyContent: 'center',right: 20,bottom: 20,backgroundColor: 'white',borderRadius: 25
  },FloatingButtonStyle: {
    width: 50,},});

export default LocationComponent;

解决方法

当您更改标记的位置时，您需要使用 react-native-maps 提供的 API animate 您的地图。