React-Native-Maps:如何动画来协调?

Posted

技术标签:

【中文标题】React-Native-Maps:如何动画来协调?【英文标题】:React-Native-Maps: How to animate to coordinate? 【发布时间】:2017-06-21 06:48:04 【问题描述】:

我正在使用以下代码但没有成功:

//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这样的函数。

【问题讨论】:

【参考方案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 引用更新为更新的方式。见:Ref Example

【讨论】:

如何在地图底部显示标记不在(中心)位置?【参考方案2】:

在我的情况下,我使用 animateToCoordinate() 如下,它对我有用:

  var _mapView: MapView;

  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.animateToCoordinate(
            latitude: LATITUDE,
            longitude: LONGITUDE
          , 1000)>
          <Text>Tap</Text>
        </TouchableOpacity>
      )
  

【讨论】:

【参考方案3】:

不幸的是,现在 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>
  )

【讨论】:

animateToRegion 需要 latitudeDeltalongitudeDelta。另一方面,animateCamera 没有,所以如果不跟踪缩放值会更容易一些。即,_mapView.animateCamera( center: latitude, longitude )【参考方案4】:

这里有一个解决方案。

const animateToCoordinat = (lat, long) => 
  mapView?.animateCamera(
    center: 
      latitude: lat,
      longitude: long,
    ,
    duration: 
      1000,
    
  );

https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md#:~:text=current%20camera%20configuration.-,animateCamera,-camera%3A%20Camera%2C%20%7B%20duration

您也可以使用setCamera 方法。

【讨论】:

【参考方案5】:

我的案例使用了 Animate Camera 功能,我使用了 ,这个组件生成了一个很酷的动画...

<MapView.Animated
    provider =  Platform.OS === 'android' ? PROVIDER_GOOGLE : PROVIDER_DEFAULT  // remove if not using Google Maps
    style =  styles_l.map        
    ref = (map) => (this.map = map)
    initialRegion =  this.state.region 
    followsUserLocation =  true
    showsCompass =  true
    showsUserLocation =  true
    onRegionChange = () => this.handleChangeRegion 
    onRegionChangeComplete = () => this.handleChangeRegion.bind(this) >
</MapView.Animated >

这个组件会调用这个函数:

handleChangeRegion = (region) => 
    this.map.animateCamera( center: region );

我希望这也可以帮助你,它真的是一个很好的组件!并且非常有用,祝贺相关人员。

【讨论】:

以上是关于React-Native-Maps:如何动画来协调?的主要内容,如果未能解决你的问题,请参考以下文章

React-native-maps 标记方法 animateMarkerToCoordinate 抛出未定义的错误

在 UIButton down/up 上协调两个 UIView 动画

JQuery 动画和 CSS 过渡不协调

React-Native-Maps 如何绘制折线

react-native-maps:如何在按钮按下时跟随用户位置

缩放到指定的标记 react-native-maps