Question

我在React Native Maps库中遇到一个奇怪的问题。当我正确地遵循所有文档时，每次移动地图时，地图似乎都结结巴巴并移回原始位置。或偶尔地，它会移动到我想要的位置（出现断断续续）

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

对于无法通过上述答案解决问题的任何人，@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

如果用户单击地图外的按钮，我需要一种方法来更改位置，同时还可以在地图上自由移动，因此该解决方案最适合我。

Answer 2

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

Answer 3

将onRegionChange更改为onRegionChangeComplete，现在应该可以正常工作了。：）

React Native Maps-OnRegionChange口吃地图

3 个答案: