Как отобразить текущее местоположение автоматически в реагировать родной - PullRequest
Новая
       35

Как отобразить текущее местоположение автоматически в реагировать родной

0 голосов
/ 09 октября 2018

Как автоматически отображать текущее местоположение в режиме «native». Это мой экран, в котором есть кнопка, при нажатии которой я могу получить местоположение. Но я хочу получить текущее местоположение. Я открыл этот экран и отобразил маркер для текущего местоположения.Пожалуйста, помогите мне, я новичок, чтобы отреагировать на родную. И я хочу реализовать изменения местоположения в этом проекте. 

  import React, { Component } from 'react';
    import { View, StyleSheet,Text,Button, Dimensions } from 'react-native';
    import MapView from 'react-native-maps';







    class SecondScreen extends Component{


      constructor(props) {
        super(props);
        this.getLocationHandler = this.getLocationHandler.bind(this);
      }

      static navigationOptions =
      {
         title: 'Welcome',

         headerStyle: {

          backgroundColor:'steelblue'

       },

       headerTintColor: '#fff',

      };




    state ={
      focusedLocation:{
        latitude:12.84497121,
        longitude:77.68119763,
        latitudeDelta:0.0122,
        longitudeDelta:Dimensions.get("window").width / 
        Dimensions.get("window").height * 0.0122
      },
      locationChoosen:false
    }

     pickLocationHandler = event => {
       const coords = event.nativeEvent.coordinate;
       this.map.animateToRegion({
    ...this.state.focusedLocation,
    latitude :coords.latitude,
    longitude : coords.longitude
       });
       this.setState(prevState =>{
         return {
           focusedLocation :{

           ...prevState.focusedLocation,
           latitude:coords.latitude,
           longitude:coords.longitude
           },
           locationChoosen:true
         };

       });
     };
     getLocationHandler = () =>{
       navigator.geolocation.getCurrentPosition(pos =>{

        const coordsEvent ={ 
          nativeEvent :{
            coordinate : {
              latitude : pos.coords.latitude,
              longitude : pos.coords.longitude
            }
          }
        };
    this.pickLocationHandler(coordsEvent);

       },
       err => {
         console.log(err);
         alert("Fetching the position failed,Please pick one manually")
       })
     }
          render() {
            let marker =null;
            if(this.state.locationChoosen){
              marker = <MapView.Marker coordinate = {this.state.focusedLocation} />;
            }
            return (


              <View style={{flex: 1}}>

                <MapView 
                initialRegion={this.state.focusedLocation}
               //{...getLocationHandler}
                style={styles.map}
                onPress = {this.pickLocationHandler}
                ref = {ref => this.map = ref} >
                  {marker}
                </MapView>


           <Button  title = "Locate me" onPress={this.getLocationHandler}/>


              </View>
            );
          }

    }
    export default SecondScreen
    const styles = StyleSheet.create({

    map:{
      width:"100%",
      height:'90%'
    }


    });
...