web-dev-qa-db-fra.com

React-Native-Maps: Comment animer pour coordonner?

J'utilise le code suivant sans succès:

// À l'intérieur du conteneur NativeBase

        <MapView.Animated
           ref="map"
           style = {styles.map}
           showsUserLocation = {true}
           zoomEnabled = {true}
           showsMyLocationButton = {true}
           showsCompass = {true}
           showScale = {true}
           showsIndoors = {true}
           mapType = {this.state.mapTypes[this.state.mapTypeCode]}
        />

// À l'intérieur du composantDidMount de la classe

navigator.geolocation.getCurrentPosition(
  (position) => {
    var initialPosition = JSON.stringify(position.coords);
    this.setState({position: initialPosition});

    let tempCoords = {
      latitude: Number(position.coords.latitude),
      longitude: Number(position.coords.longitude)
    }

    this.refs.map.animateToCoordinate(tempCoords, 1);

  }, function (error) { alert(error) },

);

Mais une erreur se produit en disant qu'il n'y a pas une telle fonction animateToCoordinate.

javascriptgoogle-mapsreact-nativereact-reduxreact-native-maps
6
Diego Penteado

J'ai eu quelques problèmes où this.refs n'est pas défini, sauf si je lie une référence à this dans le constructeur à la fonction dans laquelle j'utilise this.refs. Dans votre cas, essayez ceci:

constructor(props) {
    super(props);
    this._getCoords = this._getCoords.bind(this);
    this.state = {
        position: null
    };
}

componentDidMount() {
    this._getCoords();
}

_getCoords = () => {
    navigator.geolocation.getCurrentPosition(
        (position) => {
            var initialPosition = JSON.stringify(position.coords);
            this.setState({position: initialPosition});
            let tempCoords = {
                latitude: Number(position.coords.latitude),
                longitude: Number(position.coords.longitude)
            }
            this._map.animateToCoordinate(tempCoords, 1);
          }, function (error) { alert(error) },
     );
};

render() {
    return (
         <MapView.Animated
             ref={component => this._map = component}
          />
    );

}

Bien que l’utilisation de références de chaîne soit encore possible, je pense que c’est désormais un héritage; c’est pourquoi j’ai également mis à jour la référence de MapView à la manière la plus récente. Voir: Exemple de référence

8
Matthew Corway

Dans mon cas, j'ai utiliséanimateToCoordinate ()like suit et cela fonctionne pour moi:

  var _mapView: MapView;

  render() {
      return ( 
        <MapView style = {styles.maps}
          ref = {(mapView) => { _mapView = mapView; }}
          initialRegion = {{
            latitude: 6.8523,
            longitude: 79.8895,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
        <TouchableOpacity 
           onPress = {() => _mapView.animateToCoordinate({
            latitude: LATITUDE,
            longitude: LONGITUDE
          }, 1000)}>
          <Text>Tap</Text>
        </TouchableOpacity>
      )
  }
8
Dinith Minura

Malheureusement maintenant, animateToCoordinate est obsolète et si vous souhaitez en faire autant, vous devez utiliser animateCamera ou animateToRegion à la place.

render() {
  return ( 
    <MapView style = {styles.maps}
      ref = {(mapView) => { _mapView = mapView; }}
      initialRegion = {{
        latitude: 6.8523,
        longitude: 79.8895,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
    <TouchableOpacity 
       onPress = {() => _mapView.animateToRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE
      }, 1000)}>
      <Text>Tap</Text>
    </TouchableOpacity>
  )

}

1
mdeveloper