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

Question

我想通过单击“定位我”按钮更改我的 Map 位置，“定位我”获取我当前的坐标并在反应 state 中设置。 但问题是，通过单击“定位我”按钮，我的 map position 没有改变，而我的标记位置已经改变

单击“定位我”按钮之前的图像

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

// 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,
            latitudeDelta: 0.0922,
            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,
    height: 50,
  },

});

export default LocationComponent;

Answer 1

当您更改标记的 position 时，您需要使用 react-native-maps 给出的 API 为您的 map 设置动画。