地理定位 - React Native

Question

我遵循了以下教程，以便为我的 React 本机应用程序获取用户位置： https://reactnativemaster.com/react-native-geolocation-example/
但是，除了我的 iphone 上的 Hello 之外，什么也没有显示。

我认为问题在于地理编码为空，但我不知道如何解决它。

任何提示都会有所帮助:)

如果需要请看下面我的代码：

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
} from "react-native";
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';



class App extends Component {
  state= {
    location:null,
    geocode:null,
    errorMessage:""
  }

  getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);


    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }

    let location = await Location.getCurrentPositionAsync({accuracy:Location.Accuracy.Highest});
    const { latitude , longitude } = location.coords
    this.getGeocodeAsync({latitude, longitude})
    this.setState({ location: {latitude, longitude}});

  };

  getGeocodeAsync= async (location) => {
    let geocode = await Location.reverseGeocodeAsync(location)
    this.setState({ geocode})
  }

  render(){
    const {location,geocode, errorMessage } = this.state
    return (
        <View style={styles.overlay}>
          <Text>Hello</Text>
          <Text style={styles.heading1}>{geocode  ? `${geocode[0].city}, ${geocode[0].isoCountryCode}` :""}</Text>
          <Text style={styles.heading2}>{geocode ? geocode[0].street :""}</Text>
          <Text style={styles.heading3}>{location ? `${location.latitude}, ${location.longitude}` :""}</Text>
          <Text style={styles.heading2}>{errorMessage}</Text>

        </View>
    );
  }
}

export default App;

Answer 1

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
} from "react-native";
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';



class App extends Component {
  state= {
    location:null,
    geocode:null,
    errorMessage:""
  }

  // You have to call this.getLocationAsync()

  componentDidMount(){
    // this is needed for geocode
    Location.setApiKey("Your-API-KEY-Here")
    this.getLocationAsync();
  }

  getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);


    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }

    let location = await Location.getCurrentPositionAsync({accuracy:Location.Accuracy.Highest});
    const { latitude , longitude } = location.coords
    this.setState({ location: {latitude, longitude}});
    this.getGeocodeAsync({latitude, longitude}).catch(err => {this.setState({errorMessage: err})})

  };

  getGeocodeAsync= async (location) => {
    let geocode = await Location.reverseGeocodeAsync(location)
    this.setState({geocode: geocode})

    // check console for geocode response
    console.log(geocode)
  }

  render(){
    const {location,geocode, errorMessage } = this.state
    return (
        <View style={styles.overlay}>
          <Text>Hello</Text>
          <Text style={styles.heading1}>{geocode  ? `${geocode[0].city}, ${geocode[0].region}` :""}</Text>
          <Text style={styles.heading2}>{geocode ? geocode[0].country :""}</Text>
          <Text style={styles.heading3}>{location ? `${location.latitude}, ${location.longitude}` :""}</Text>
          <Text style={styles.heading2}>{errorMessage}</Text>

        </View>
    );
  }
}

// Create styles for your headings here

const styles = StyleSheet.create({
  heading1:{
    fontSize: 24
  },
  heading2:{
    fontSize: 18
  },
  heading3:{
    fontSize: 12
  }
})

export default App;

您需要为地理编码服务使用您的 google API 密钥，这样它就不会 return 为空，如果您运行如果没有它，您应该设置状态用于显示地理编码的错误消息。

地理定位 - React Native

Geolocation - React Native

javascript

geolocation

reactjs

react-native