Question

我正在使用react-native-maps在我的React Native应用中显示地图视图。我按照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相同的库版本。
您正在使用低于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具有的react-native-maps版本依赖性。详细说明：

目前最新的react-native-maps版本是v0.20.1，并且对react-native v0.51.0具有硬依赖性。
因此，如果您将v0.20.1与v0.54.0一起使用，则您的项目将无法启动，并且您将收到错误。

如果由于某种原因您必须使用较新版本的react-native，我已经过测试，发现从主分支安装最新的react-native-maps版本将允许它与{{{ 1}}版本，直到当前最新版本（v0.54.0）。为此，请使用以下命令重新安装react-native依赖项：

react-native-maps

我不建议这是因为直接从主分支安装并使用未发布的代码通常意味着您使用的是稳定性较低，测试较少的代码。

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

1 个答案: