不能读取未定义的'animateMarkerToCoordinate'属性。

Question

    import React from 'react';
import { StyleSheet, View, Dimensions, Platform, SafeAreaView } from 'react-native';
import MapView, { Marker, AnimatedRegion } from 'react-native-maps';
import PubNubReact from 'pubnub-react';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

console.disableYellowBox = true;

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      coordinate: new AnimatedRegion({
        latitude: null,
        longitude: null,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      }),
    };

    // Replace "X" with your PubNub Keys
    this.pubnub = new PubNubReact({
      publishKey: 'X',
      subscribeKey: 'X',
    });
    this.pubnub.init(this);
  }

  // code to receive messages sent in a channel
  componentDidMount() {
    this.subscribeToPubNub();
  }

  subscribeToPubNub = () => {
    this.pubnub.subscribe({
      channels: ['location'],
      withPresence: true,
    });
    this.pubnub.getMessage('location', msg => {
      const { coordinate } = this.state;
      const { latitude, longitude } = msg.message;
      const newCoordinate = { latitude, longitude };

      if (Platform.OS === 'android') {
        if (this.marker) {
          this.marker._component.animateMarkerToCoordinate(newCoordinate, 500);
        }
      } else {
        coordinate.timing(newCoordinate).start();
      }

      this.setState({
        latitude,
        longitude,
      });
    });
  };

  getMapRegion = () => ({
    latitude: this.state.latitude,
    longitude: this.state.longitude,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  });

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <MapView
            style={styles.map}
            showUserLocation
            followUserLocation
            loadingEnabled
            ref={c => (this.mapView = c)}
            region={this.state.latitude ? this.getMapRegion() : null}
          >
            <Marker.Animated
              ref={marker => {
                this.marker = marker;
              }}
              coordinate={this.state.coordinate}
            />
          </MapView>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default App;

我得到的错误是 "无法读取未定义的'animateMarkerToCoordinate'属性" 在我的React Native代码中。我正在开发Android上的位置跟踪应用程序。它从另一个应用程序中提取LAT和LONG，并希望动画是在谷歌地图上。我在其他一些网站上读到animateMarkerToCoordinate在Android的React Native中不工作。如果不是，这个问题的解决方案是什么？

Answer 1

基于这个GitHub的答案。https:/github.comreact-native-communityreact-native-mapsissues2195#issuecomment-424246731。 最好是直接使用 coordinate.timing(newCoordinate).start(); 代码。

Invariant Violation: [37,"AIRMapMarker",481,{"coordinate":{"latitude":37.78825,"longitude":-122.4324,"latitudeDelta":"<<NaN>>","longitudeDelta":"<<NaN>>"},"position":"absolute","backgroundColor":0}]

造成这一故障的原因是 newCoordinate 缺少了 latitudeDelta 和 longitudeDelta所以最后的代码应该是这样的。

this.pubnub.getMessage('location', msg => {
      const { coordinate } = this.state;
      const { latitude, longitude } = msg.message;
      const newCoordinate = {
          latitude,
          longitude,
          latitudeDelta = LATITUDE_DELTA,
          longitudeDelta = LONGITUDE_DELTA
      };

      coordinate.timing(newCoordinate).start();

      this.setState({
        latitude,
        longitude,
      });
    });