如何在反应原生地图中使用 animateToRegion 函数？答案

【问题标题】：How to use animateToRegion function in react native maps?如何在反应原生地图中使用 animateToRegion 函数？
【发布时间】：2021-03-12 07:50:15
【问题描述】：

我正在使用 react-native 地图聚类的 MapView 和 react-native-maps 的标记和标注。我无法使用animateToRegion。它告诉我this.mapView.animateToRegion is not a function

 <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}/>

【问题讨论】：

标签： react-native

【解决方案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>
    );
}

【讨论】：

当我尝试这种方法时，mapView.root 返回 null，您介意告诉我您使用的是哪个版本的 React Native Maps？
只要使用this.mapView.animateToRegion(r, 2000);
你能告诉如何使用功能组件和 useRef 做到这一点
@yaswanthkoneri 。我也是，在 react-native-map 中使用 useRef 遇到了同样的问题。当我在做 ref={ref => mapRef = ref} 时，我在 mapRef 中得到 null，如果我在这种情况下做 ref={mapRef}，我将无法获得“animateToCoordinate”函数。如果您找到任何解决此问题的方法，请帮助我，否则我将不得不创建一个类组件。

【解决方案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 })}}
/>

【讨论】：

【解决方案3】：

我认为问题在于 prop 不称为 ref，而是称为 mapRef。将 ref 传递到那里，它应该可以工作。

然后您还必须使用类似 this.mapView.[current/map]animateToRegion 的名称来调用它。只需检查你得到的 mapView 对象。

【讨论】：