React-native-maps 标记方法 animateMarkerToCoordinate 抛出未定义的错误
Posted
技术标签:
【中文标题】React-native-maps 标记方法 animateMarkerToCoordinate 抛出未定义的错误【英文标题】:React-native-maps marker method animateMarkerToCoordinate throws undefined error 【发布时间】:2018-08-14 14:18:55 【问题描述】:我正在使用 react-native-maps 在我的 React Native 应用程序中显示地图视图。我按照example 为标记坐标设置动画,但每当我调用 animateMarkerToCoordinate() 方法时,我都会收到未定义的错误。在做一些检查后,我尝试在我的 componentWillReceiveProps 中调用上述方法。
这是我的组件WillReceiveProps:
componentWillReceiveProps(nextProps)
if(nextProps.user && JSON.stringify(nextProps.user.profile.location) != JSON.stringify(this.props.user.profile.location))
const userCoordinate = this.state.userCoordinate
const newUserCoordinate =
latitude: nextProps.user.profile.location.latitude,
longitude: nextProps.user.profile.location.longitude,
if (Platform.OS === 'android')
console.log('platform = android')
if (this.userMarker)
// none of this options work, both return undefined
this.userMarker._component.animateMarkerToCoordinate(newUserCoordinate, 500)
this.userMarker.animateMarkerToCoordinate(newUserCoordinate, 500)
else
userCoordinate.timing(newUserCoordinate).start();
这是我的渲染方法的 MapView 部分:
<MapView
style=styles.map
initialRegion=this.regionFrom(this.props.user.profile.location)
mapType='standard' >
<Marker.Animated
ref=marker => this.userMarker = marker;
coordinate=this.state.userCoordinate
onPress=() => this.handleOnPress() >
<UserMarker loaded=this.props.loaded />
</Marker.Animated>
</MapView>
如果有帮助,我的状态:
constructor(props)
super(props);
this.state =
region: this.regionFrom(this.props.user.profile.location),
profileSelected: null,
userPreviewVisible: false,
userCoordinate: new AnimatedRegion(
latitude: props.user.profile.location.latitude,
longitude: props.user.profile.location.longitude,
),
这是日志错误(每当我使用 marker._component 或只是标记时都会出现相同的错误,我尝试在代码中更改它以查看是否是问题所在):
我必须将它添加为图片,因为当我将堆栈跟踪作为文本发布时,堆栈溢出的编辑器会出错。
请注意,我只在 android 上进行测试,而且我真的被困在了这个中。如果有人可以提供帮助,我将不胜感激。谢谢。
【问题讨论】:
【参考方案1】:重现此问题需要很长时间,但这是我发现的两种情况:
-
您使用了 Expo 或
create-react-native-app
,它们本身捆绑了与 Expo 相同的库版本。
您使用的是低于 v0.20.0 的 react-native-maps
版本。
没有您的package.json
,我无法判断您遇到的是哪种情况,所以我将解释这两种情况下发生的情况。
案例#1
Expo SDK (v25) 的最新版本仅更新为react-native-maps
v0.19.0。如果您遵循提交历史记录,您将看到 this feature was added in v0.20.0。所以你没有办法使用这种方法。您将不得不使用与 ios 相同的代码。因此,您可以摆脱整个 if
块并使用:
userCoordinate.timing(newUserCoordinate).start();
Android 上的性能会很糟糕,但这是修复的动机。
案例#2
原因同上。您可以回退并使用与上述相同的代码,但是,我建议通过升级您的 react-native
和 react-native-maps
版本来解决此问题,以便您可以使用新方法。这样,您将在 Android 上获得性能更好的动画。请注意react-native-maps
具有的硬react-native
版本依赖性。详细说明:
react-native-maps
版本是v0.20.1,它对react-native
v0.51.0 有很强的依赖关系。
因此,如果您将 v0.20.1 与 v0.54.0 一起使用,您的项目将无法启动并且会出现错误。
如果由于某种原因您必须使用较新版本的 react-native
,我已经测试并发现从 master 分支安装最新的 react-native-maps
版本将允许它与当前版本的 react-native
一起使用最新版本 (v0.54.0)。为此,请重新安装 react-native-maps
依赖项:
# Using yarn:
yarn add https://github.com/react-community/react-native-maps.git
# Using npm:
npm install https://github.com/react-community/react-native-maps.git --save
我不推荐这样做,因为直接从 master 分支安装并使用未发布的代码通常意味着您使用的代码不太稳定,测试较少。
【讨论】:
我确实在使用 react-native-maps v0.19.0。在您回答之前,我只是使用与 iOS 相同的方法。我会尝试升级到最新版本的 react-native-maps,谢谢。以上是关于React-native-maps 标记方法 animateMarkerToCoordinate 抛出未定义的错误的主要内容,如果未能解决你的问题,请参考以下文章
React-Native-Maps:地图为空。仅显示 Google 徽标和标记
更改 react-native-maps 中活动标记的不透明度
react-native-maps :如何在放大和缩小时获取动态 latitudeDelta 和 longitudeDelta 值
getCurrentPosition 中的 React-native-maps setState 不适用于我的 url API