Как автоматически отображать текущее местоположение в режиме «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%'
}
});