如何在React Native地图中使用animateToRegion函数？

Question

我正在使用react-native-map clustering的MapView以及react-native-maps的Marker和callout。我无法使用animateToRegion，它提示我this.mapView.animateToRegion不是一个函数

 <MapView
 ref={map=>{mapView = map}}
 provider='google'
 clustering={true}
 onClusterPress={this.onPressCluster}
 region={this.state.region}
 onRegionChange={this.onRegionChange}
 onRegionChangeComplete={this.onRegionChangeComplete}
 style={styles.map}
 showsUserLocation={true}
 followUserLocation={true}
 zoomEnabled={true}
 ScrollEnabled={true}
 showsBuildings={true}
 showsMyLocationButton={false}/>

- Diksha Deep

Answer 1

animate(){
    let r = {
        latitude: 42.5,
        longitude: 15.2,
        latitudeDelta: 7.5,
        longitudeDelta: 7.5,
    };
    this.mapView.root.animateToRegion(r, 2000);
}

render(){
    return(
        <MapView
            ref = {(ref)=>this.mapView=ref}
            region={{
                latitude: 35.688442,
                longitude: 51.403753,
                latitudeDelta: 0.5,
                longitudeDelta: 0.5,
            }}
            onPress={()=>this.animate()}
        >

           ...markers...

        </MapView>
    );
}

- Mahdi Bashirpour

---

当我尝试这种方法时，mapView.root 返回 null，您可以告诉我您使用的 React Native Maps 版本是哪个吗？ - PrimeTimeTran

只需使用 this.mapView.animateToRegion(r, 2000);。 - Rob Gleeson

你能告诉我如何使用函数组件和useRef来实现这个吗？ - yaswanthkoneri

@yaswanthkoneri。我也遇到了在react-native-map中使用useRef时出现的同样问题。当我使用ref={ref => mapRef = ref}时，mapRef会变成null，而如果我使用ref={mapRef}，则无法获取“animateToCoordinate”函数。如果您找到了解决此问题的方法，请帮助我，否则我将不得不创建一个类组件。 - anshuman burmman

Answer 2

clickOnSearchedAddress = (placeId, index, dscrpt) => {
  getLatLongFromAddress(placeId).then((response) => {

    let r = {
      [Constants.KEY_LATITUDE]: response.geometry.location.lat,
      [Constants.KEY_LONGITUDE]: response.geometry.location.lng,
      latitudeDelta: latitudeDelta,
      longitudeDelta: longitudeDelta
    }
    this.mapView.animateToRegion(r, 1000)
    Keyboard.dismiss()
    isSetTextProgramatically = true;
    this.setState({
      search: dscrpt,
      searchData: [],

    })

  }).then((error) => { })
}


<MapView

  ref={ref => this.mapView = ref}
  provider={PROVIDER_GOOGLE}
  style={[styles.map, , { width: this.state.width }]}

  initialRegion={region}
  onRegionChangeComplete={this.onRegionChange}
  showsMyLocationButton={true}
  showsCompass={true}
  showsUserLocation={true}
  onMapReady={() => this.setState({ width: width - 1 })}}
/>

- anshuman burmman

Answer 3

我认为问题在于该属性不是ref，而是mapRef。将ref传递进去，应该就能解决问题了。

然后你也必须像这样调用它：this.mapView.[current/map]animateToRegion。只需检查您得到的mapView对象即可。

- JackDev

Answer 4

首先，您可以使用animateCamera而不是animateRegion：

• 类组件：

    <MapView ref={(ref) => this.mapViewRef = ref} />

• 函数式组件：

    const mapViewRef = React.useRef(null);

    ...

    <MapView ref={mapViewRef} />

然后，使用 ref 调用 animateCamera()：

• 类组件：

    // example region:
    const camera =  {
        center: {
            latitude: 10.775382995605469,
            longitude: 106.68632109704656,
            latitudeDelta: 0.002305,
            longitudeDelta: 0.0010525,
        }
    };
    this.mapViewRef.animateCamera(camera, {duration?: number});

• 函数式组件：

    mapViewRef.current?.animateCamera(camera, {duration?: number});

- Nak