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

Question

我正在使用 react-native-maps to display a map view in my React Native app. I followed the example 来设置标记坐标的动画，但每当我调用 animateMarkerToCoordinate() 方法时，我都会收到未定义的错误。在做了一些检查后，我尝试在我的 componentWillReceiveProps 中调用所述方法。

这是我的 componentWillReceiveProps：

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 上进行测试，而且我真的被困在了这一点上。如果有人可以提供帮助，我将不胜感激。谢谢。

Answer 1

重现这一点花了很长时间，但这是我发现的两种情况，你会运行到这里：

您使用了 Expo 或 create-react-native-app，它们本身捆绑了与 Expo 相同的库版本。
您使用的 react-native-maps 版本低于 v0.20.0。

没有你的 package.json，我无法判断你运行处于哪种情况，所以我将解释两种情况下发生的情况。

案例 #1

最新版Expo SDK(v25)只更新到react-native-maps v0.19.0. If you follow the commit history, you'll see that 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 标记方法 animateMarkerToCoordinate 抛出未定义的错误

React-native-maps marker method animateMarkerToCoordinate throws undefined error

javascript

android

google-maps

react-native

react-native-maps