React-Native-Maps: как оживить координацию?

Question

Я использую следующий код без успеха:

// Внутри контейнера из 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]} 
     /> 

// Внутри componentDidMount класса

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) }, 

); 

Но ошибке в нет такой функции animateToCoordinate. .

Answer 1

У меня были некоторые проблемы, где this.refs не определен, если не связать ссылку на это в конструкторе к функции я использую this.refs в вашем случае, попробуйте следующее:

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} 
      /> 
    ); 

} 

Хотя использование строк refs по-прежнему возможно, я считаю, что это наследие сейчас, поэтому я также обновил MapView ref до более нового пути. См: Ref Example

Answer 2

В моем случае я использовал animateToCoordinate() нравится следует, и это работает для меня:

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> 
    ) 
    }