React Native 无法读取未定义的属性“animateMarkerToCoordinate”

xe55xuns 于 2023-01-18 发布在 React

关注(0)|答案(5)|浏览(135)

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;

我在React Native代码中遇到错误**“无法读取属性”animateMarkerToCoordinate“of undefined”**。我正在Android上开发位置跟踪应用程序。该应用程序从另一个应用程序中提取LAT和LONG，并希望在GoogleMap上显示动画。我在其他一些网站上看到animateMarkerToCoordinate在React Native for Android中不工作。这是真的吗？如果不是，该问题的解决方案是什么？

react-native

来源：https://stackoverflow.com/questions/61740171/cannot-read-property-animatemarkertocoordinate-of-undefined

5条答案

按热度按时间

fgw7neuy1#

此问题出现在react native 0.63.+版本中。根据react-native-maps的官方文档

const duration = 500

  if (this.props.coordinate !== nextProps.coordinate) {
    if (Platform.OS === 'android') {
      if (this.marker) {
        this.marker._component.animateMarkerToCoordinate(
          nextProps.coordinate,
          duration
        );
      }
    } else {
      this.state.coordinate.timing({
        ...nextProps.coordinate,
        duration
      }).start();
    }
  }

但这是不工作与最新的React原生版本。只是删除_component之前animateMarkerToCoordinate它会工作得很好。

const duration = 500

  if (this.props.coordinate !== nextProps.coordinate) {
    if (Platform.OS === 'android') {
      if (this.marker) {
        this.marker.animateMarkerToCoordinate(
          nextProps.coordinate,
          duration
        );
      }
    } else {
      this.state.coordinate.timing({
        ...nextProps.coordinate,
        duration
      }).start();
    }
  }

赞(0）回复(0）举报 2023-01-18

smtd7mpg2#

在当前版本的React Native和PubNub（4.31+）中，使用getMessage方法可能无法正确获取消息，因此“消息”显示为undefined。
因此，如果有人遇到这个问题，只需使用addListener而不是getMessage，并遵循其各自的文档。
我已经花了几天的时间试图运行同样的代码，我希望我能帮助别人。

赞(0）回复(0）举报 2023-01-18

bwitn5fc3#

基于GitHub的回答：https://github.com/react-native-community/react-native-maps/issues/2195#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,
      });
    });

赞(0）回复(0）举报 2023-01-18

pobjuy324#

使用try catch。它不会崩溃

if (this.marker && this.mounted) {

          setTimeout(() => {
            try {
              this.marker.animateMarkerToCoordinate(
                coordinate,
                duration
              )
            
          } catch (error) {
            console.log(error)
          }

        }, 100);
        // this.marker._component.animateMarkerToCoordinate(
        //   coordinate,
        //   duration
        // );
      }

赞(0）回复(0）举报 2023-01-18

bfnvny8b5#

此.标记.动画标记到坐标使用此而不是此.标记._组件.动画标记到坐标

赞(0）回复(0）举报 2023-01-18