Кнопка повторного центрирования показывает, когда пользователь перемещает карту - PullRequest
Новая
       62

Кнопка повторного центрирования показывает, когда пользователь перемещает карту

0 голосов
/ 23 сентября 2019

Я создал приложение Reaction-native-Map.где маркер движется.что я хочу, когда пользователь перемещает карту, затем повторно нажимает на нее кнопку рендеринга на карте, после нажатия на нее карта переходит в центр, где находится маркер.вся карта и уходит в начальный регион.

Note - I also created the re-center component outside the main component but whenever I'm going to change the state in child(re-center) component error comes component not mounted yet

  MoveToCenter = () =>{
    this.mapView.animateToRegion(this.regionChange,2000);
  }

onRegionChange = region =>{
  const {Buttonvisible} = this.state;
  this.latitudeDelta = region.latitude;
  this.longitudeDelta = region.longitude;
  console.log("latitude", parseFloat(this.latitudeDelta).toFixed(4), 
  parseFloat(this.ParentData[0].latitude).toFixed(4))

  if(parseFloat(this.latitudeDelta).toFixed(4) != 
   parseFloat(this.ParentData[0].latitude).toFixed(4) 
  && 
  parseFloat(this.longitudeDeltas).toFixed(4) != 
  parseFloat(this.ParentData[0].longitude).toFixed(4)){
  if(!Buttonvisible){
  this.setState({Buttonvisible: true})
  }
  }
 if(parseFloat(this.latitudeDelta).toFixed(4) == 
 parseFloat(this.ParentData[0].latitude).toFixed(4) 
   && 
  parseFloat(this.longitudeDelta).toFixed(4) == 
parseFloat(this.ParentData[0].longitude).toFixed(4)){
  if(Buttonvisible){
    this.setState({Buttonvisible: false})
    }
   }
  }
 render(){
     const {stopsData} = this.state;
     const {stopId} = this.state;
     const {stopSequence} = this.state;
     const {routeId} = this.state;
     const {InitialData} = this.state;
     const {BusData} = this.state;
     const {Buttonvisible} = this.state;

   return(
   <View style = {styles.map}>
    <View style = {{position:'absolute', top:10, left: 10, zIndex:100}}>
      <TouchableOpacity onPress = {()=> this.MoveToCenter()}>
      {Buttonvisible?<Text>center</Text>:null}
    </TouchableOpacity>
    </View>
     <MapView
        ref = {(ref)=>this.mapView=ref}
        provider={PROVIDER_GOOGLE}
        enableZoomControl={true}
         zoomEnabled = {true}
         style={styles.map}
         onRegionChangeComplete = {this.onRegionChange}
         region={
         {
          latitude: stopsData[0].latitude,
          longitude: stopsData[0].longitude,
          latitudeDelta: 0.055,
          longitudeDelta: 0.051
       }
      }
      >
...