无法获取 MapView 的引用 - react-native-maps

Question

我一直在尝试使用MapView的方法来动画地移动到一个区域，但是我需要访问ref，但它却是未定义的。其他所有东西都正常工作，只是我无法获得ref，并且每次我尝试调用一个方法时，如 `

this.map.animateToRegion({
  latitude: 0,
  longitude: 0,
  latitudeDelta: 1,
  longitudeDelta: 1
});

我收到一个错误提示：

无法读取未定义的属性 'animateToRegion'

<MapView
  ref={r => this.map = r}
  mapPadding={{ top: 0, left: 0, right: 0, bottom: 400 }}
  provider='google'
  style={{ flex: 1 }}
  region={this.region}
>
  {this.renderBarberMarkers()}
</MapView>

- Craques

---

面对相同的问题.. - Berke

重复的答案，请参考链接：https://dev59.com/5GsMtIcB2Jgan1zn088w#71156487 - Muhammad Bilal

Answer 1

如果您正在使用hooks，这是您的方法：

在您的函数顶部：

const mapView = React.createRef();
const animateMap = () => {
    mapView.current.animateToRegion({ // Takes a region object as parameter
        longitude: 28.97916756570339,
        latitude: 41,
        latitudeDelta: 0.4,
        longitudeDelta: 0.4,
    },1000);
}

像这样给你的MapView一个ref：

<MapView provider={PROVIDER_GOOGLE} region={{
       latitude: 37.78825,
       longitude: -122.4324,
       latitudeDelta: 0.015,
       longitudeDelta: 0.0121,
   }}
   ref={mapView}
   style={{flex:1}}>
</MapView>

最后一件要做的事情是触发动画，你可以像这样做：

<TouchableOpacity onPress={animateMap}><Text>Start</Text></TouchableOpacity>

- Halil Şağan

---

这太完美了，我之前无法弄清楚所有东西应该放在哪里，现在我的地图变得非常漂亮 :D - Taha Attari

Answer 2

这里是地图视图（mapView）

<MapView
  ref={(map) => { this.map = map; }}
  showsUserLocation={true}
  showsMyLocationButton={true}
  initialRegion={this.state.region}
/>

那么，您需要调用：

//animate to user current location
this.map.animateToRegion(yourRegionObject,1000)

我使用的方式如下：

我像这样使用；

//to get user location
getLocation(){

    navigator.geolocation.getCurrentPosition(
        (position) => {
            let latitude = parseFloat(position.coords.latitude);
            let longitude = parseFloat(position.coords.longitude);

            console.log('location position: ', position);

            let region = {
                latitude: latitude,
                longitude: longitude,
                latitudeDelta: 0.0522,
                longitudeDelta: 0.0321,
            };

            this.setState({region: region});

            console.log('position: ', position);
            console.log('this.map: ', this.map);

            //animate to user current location
            this.map.animateToRegion(region,1000)


        },
        (error) => console.log('position error!!!', error),
        {enableHighAccuracy: false, timeout: 3000}
    );
}

- Orhan

Answer 3

使用钩子，您可以使用以下步骤：

首先导入useRef, useEffect。

import React, {useRef, useEffect} from 'react';

那么

const mapRef = useRef(null);

在您的MapView元素中添加：

<MapView
 provider={PROVIDER_GOOGLE}
 ref={mapRef} />

您可以在使用中找到MapRef

useEffect(() => {
    if (mapRef) {
      console.log(mapRef);
    }
});

- Amir Ardalan

Answer 4

您尝试过使用

React.createRef();

用你的映射表？

或者

我所做的是将它导出到我的类外面，像这样

export let mapRef: MapView | null;

同时还创建了导出函数，例如：

export function animateToRegion(region: Region, duration?: number) {
  if (mapRef) {
    mapRef.animateToRegion(region, duration);
  }
}

我的MapView看起来像这样

    <MapView
 ref={(c) => mapRef = c}
 showsMyLocationButton={false} />

在我的类之外，这样如果它是一个组件，你就可以轻松地调用它。

- Joshua

---

我之前尝试过这两种解决方案，但是我无法理解第二个。我不明白这一行代码 export let mapRef: MapView | null; 是什么意思。它看起来像是TypeScript，如果我错了，请纠正我，因为我正在使用JavaScript。 - Craques