React Native Maps - OnRegionChange 卡住地图

Question

我在使用 React Native 地图库时遇到了一个奇怪的问题。在我正确遵循所有文档的那一刻，每次我移动地图时，它似乎都停滞不前并移回原来的位置。或者偶尔它会移动到我想要的位置（有口吃）

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView from "react-native-maps";
import Geolocation from 'react-native-geolocation-service';
import {YellowBox} from 'react-native';

type Props = {};
export default class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            region: {
                latitude: 53.41058,
                longitude: -2.97794,
                latitudeDelta: 0.1,
                longitudeDelta: 0,
            }
        }
    }

    componentDidMount() {
        Geolocation.getCurrentPosition(
            (position) => {
                console.warn(position.coords.latitude);
                console.warn(position.coords.longitude);
                this.setState({
                    region: {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        latitudeDelta: 0.02,
                        longitudeDelta: 0,
                    }
                });
            },
            (error) => {
                console.warn(error.code, error.message);
            },
            {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000},
        )
    }

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

    render() {
        return (
            <MapView
                style={styles.map}
                region={this.state.region}
                showsUserLocation={true}
                onRegionChange={region => {
                    this.setState({region});
                }}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
});

但是，如果我将 onRegionChange 更改为 onRegionChangeCompleted，我就可以在地图上四处移动了。但是后来我不能倾斜，当我用手指转动地图时，它有时会弹回到原来的位置。

有没有其他人遇到过这个奇怪的问题，或者我做错了什么？

Answer 1

从 MapView 中删除 region = {this.state.region} 为我解决了这个问题。

Answer 2

将 onRegionChange 更改为 onRegionChangeComplete，现在应该可以正常运行了。 :)

Answer 3

对于无法通过上述答案解决问题的任何人，@jalasem 在 https://github.com/react-native-maps/react-native-maps/issues/3639 上的这个答案对我有用，这是一个浓缩版：

import React, { useEffect, useRef } from 'react'
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'

const INITIAL_REGION = {
  latitude: 44.49317207749917,
  longitude: 20.896348971873522,
  latitudeDelta: 4.136923536294034,
  longitudeDelta: 5.68705391138792,
}

const Map = ({ location }) => {
  const mapRef = useRef(null)

  useEffect(() => {
    // receive a point on the map through props
    if (location) {
      console.log('change location, location: ', location)
      mapRef.current.animateToRegion({
        latitude: location.latitude,
        longitude: location.longitude,
        latitudeDelta: 0.2,
        longitudeDelta: 0.2,
      })
    }
  }, [location])

  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      initialRegion={INITIAL_REGION}
      ref={mapRef}
    />
  )
}

export default Map

我需要一种方法来在用户单击地图外的按钮时更改位置，同时还能够在地图上自由移动，所以这个解决方案最适合我。

React Native Maps - OnRegionChange 卡住地图

React Native Maps - OnRegionChange stutters the map

android

react-native

react-native-maps