时间戳

首页 > 解决方案 > navigator.geolocation.getcurrentPosition() 未获取纬度和经度值

react-native - navigator.geolocation.getcurrentPosition() 未获取纬度和经度值

问题描述

我正在运行这个基本的反应本机代码，用于在 android 设备和模拟器上获取纬度和经度值，但没有返回当前的纬度/经度值。

当在模拟器上运行时，一些值被返回，但它不是正确的纬度/经度值，而在设备上的值甚至没有被返回。这里是代码

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',
   }
})

请提出任何更好的选择..

标签： react-nativegeolocationreact-native-androidnavigator

解决方案

首先，检查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 },
   );
}

推荐阅读