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
需要 latitudeDelta
和 longitudeDelta
。另一方面,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 动画