React-Native-Maps：如何动画协调？

Question

我使用以下代码没有成功：

//NativeBase 容器内部

        <MapView.Animated
           ref="map"
           style = {styles.map}
           showsUserLocation = {true}
           zoomEnabled = {true}
           showsMyLocationButton = {true}
           showsCompass = {true}
           showScale = {true}
           showsIndoors = {true}
           mapType = {this.state.mapTypes[this.state.mapTypeCode]}
        />

//类的componentDidMount内部

navigator.geolocation.getCurrentPosition(
  (position) => {
    var initialPosition = JSON.stringify(position.coords);
    this.setState({position: initialPosition});

    let tempCoords = {
      latitude: Number(position.coords.latitude),
      longitude: Number(position.coords.longitude)
    }

    this.refs.map.animateToCoordinate(tempCoords, 1);

  }, function (error) { alert(error) },

);

但是出现错误说没有这样的函数animateToCoordinate。

原文由 Diego Penteado 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到了一些 this.refs 未定义的问题，除非我在构造函数中将对 this 的引用绑定到我在其中使用 this.refs 的函数。在你的情况下，试试这个：

 constructor(props) {
    super(props);
    this._getCoords = this._getCoords.bind(this);
    this.state = {
        position: null
    };
}

componentDidMount() {
    this._getCoords();
}

_getCoords = () => {
    navigator.geolocation.getCurrentPosition(
        (position) => {
            var initialPosition = JSON.stringify(position.coords);
            this.setState({position: initialPosition});
            let tempCoords = {
                latitude: Number(position.coords.latitude),
                longitude: Number(position.coords.longitude)
            }
            this._map.animateToCoordinate(tempCoords, 1);
          }, function (error) { alert(error) },
     );
};

render() {
    return (
         <MapView.Animated
             ref={component => this._map = component}
          />
    );

}

尽管仍然可以使用字符串引用，但我相信现在这是遗留问题，所以我也将 MapView 引用更新为更新的方式。请参阅： 参考示例

原文由 Matthew Corway 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不幸的是，现在 animateToCoordinate 已被弃用，如果您想这样做，您应该改用 animateCamera 或 animateToRegion 。

 render() {
  return (
    <MapView style = {styles.maps}
      ref = {(mapView) => { _mapView = mapView; }}
      initialRegion = {{
        latitude: 6.8523,
        longitude: 79.8895,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
    <TouchableOpacity
       onPress = {() => _mapView.animateToRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE
      }, 1000)}>
      <Text>Tap</Text>
    </TouchableOpacity>
  )

}

原文由 Masoud 发布，翻译遵循 CC BY-SA 4.0 许可协议