ユーザーの現在の位置に基づいてMapviewでポリラインを描画しますか？

Question

アプリはユーザーの場所を更新し、更新するたびに以前のパスを表示できるようにパス（ポリライン）を作成します。どうすればこれを達成できますか？ onRegionChangeが呼び出されるたびにポリラインが追加されます。

constructor(props) { 
    super(props); 

    this.state = { 
     latitude: null, 
     longitude: null, 
     error: null 
    }; 
    } 

    componentDidMount() { 
    this.watchId = navigator.geolocation.watchPosition(
     (position) => { 
     let region = { 
      latitude:  position.coords.latitude, 
      longitude:  position.coords.longitude, 
      latitudeDelta: 0.00922*1.5, 
      longitudeDelta: 0.00421*1.5 
     } 
     let coordinates = [ 
      {latitude: position.coords.latitude, longitude: position.coords.longitude} 
     ] 
     this.onRegionChange(region, region.latitude, region.longitude); 
     }, 
     (error) => this.setState({ error: error.message }), 
     { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 10 }, 
    ); 
    } 

    onRegionChange(region, lastLat, lastLong) { 
    this.setState({ 
     mapRegion: region, 
     lastLat: lastLat || this.state.lastLat, 
     lastLong: lastLong || this.state.lastLong 
    }); 
    } 

    componentWillUnmount() { 
    navigator.geolocation.clearWatch(this.watchId); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <MapView 
      style={styles.map} 
      region={this.state.mapRegion} 
      followUserLocation={true} 
      onRegionChange={this.onRegionChange.bind(this)}> 
      <MapView.Marker 
      coordinate={{ 
       latitude: (this.state.lastLat) || -36.82339, 
       longitude: (this.state.lastLong) || -73.03569, 
      }} 
      title = {"You are here"} 
      description = {"Hi there!"} 
      /> 
     </MapView> 
     </View> 
    ); 
    } 

Answer 1

私はこのコード

constructor(props) { 
    ... 
    this.state = { 
     latitude: null, 
     longitude: null, 
     error: null, 
     routeCoordinates: [] 
    }; 
    } 

    componentDidMount() { 
    this.watchId = navigator.geolocation.watchPosition(
     (position) => { 
     ... 
     const { routeCoordinates } = this.state 
     const positionLatLngs = pick(position.coords, ['latitude', 'longitude']) 
     this.setState({ routeCoordinates: routeCoordinates.concat(positionLatLngs) }) 
     ... 
    } 

    ... 

    render() { 
    return (
     <View style={styles.container}> 
     <MapView 
      ... 
      onRegionChange={this.onRegionChange.bind(this)}> 
      <MapView.Polyline 
      coordinates = {this.state.routeCoordinates} 
      strokeColor = '#19B5FE' 
      strokeWidth = {5} 
      /> 
      ... 
     </MapView> 
     </View> 
    ); 
    } 

を追加することによって、それを修正するために管理