navigator.geolocation.getcurrentPosition () не выбирает значения широты и долготы

Question

Я использую этот базовый нативный код реакции для извлечения значений широты и долготы как на устройстве Android, так и на эмуляторе, но нигде не возвращается текущее значение широты / долготы.

При запуске на эмуляторе происходит какое-то значениевозвращается, но это не правильное значение lat / long, тогда как на устройстве значение даже не возвращается. Вот код

import React, { Component } from 'react'
import { View, Text, Switch, StyleSheet, Button} from 'react-native'
import { createStackNavigator } from 'react-navigation'; 

class HomeScreen extends Component {
   render() {
      return (
         <View style = {styles.container}>
            <Button
          title="Add New Outlet"
          onPress={() => this.props.navigation.navigate('Details')}
        />
         </View>
      )
   }
}

class DetailsScreen extends React.Component {
constructor(props) {
super(props);

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



 componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
    }
        render(){
            return(
            <View style = {styles.container}>
                <Text style = {styles.boldText}>
                   Latitude:
                </Text>

                <Text>
                   {this.state.latitude}
                </Text>

                <Text style = {styles.boldText}>
                   Longitude:
                </Text>

                <Text>
                   {this.state.longitude}
                </Text>
             </View>
            )
        }

}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

const styles = StyleSheet.create ({


  container: {
      flex: 1,
      alignItems: 'center',
      marginTop: 50
   },
   boldText: {
      fontSize: 30,
      color: 'red',
   }
})

Пожалуйста, предложите какие-нибудь лучшие альтернативы.

Answer 1

Fisrt, проверьте разрешения Android:

  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Далее:

componentDidMount() {
    if (Platform.OS === "android") {
      PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      ).then(granted => {
        if (granted) this._getCurrentLocation();
      });
    } else {
      this._getCurrentLocation();
    }
  }

Затем:

_getCurrentLocation = () => {
   navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
   );
}

Answer 2

По какой-то причине navigator.geolocation не работает стабильно на устройствах Android, я изменил getCurrentPosition на watchPosition и не использовал третий параметр (geo_options).Это сработало для меня.

componentDidMount() {
  this.state.watchId = navigator.geolocation.watchPosition(
    (position) => console.log(position),
    (error) => console.log(error),
  );
}

Кроме того, вы должны очистить часы и остановить наблюдение за положением, когда компонент размонтируется.

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