react native react-native-geocoding 地址不会呈现

Question

我正在使用 React Native 创建一个应用来显示用户添加

在获得用户许可和纬度后，使用 expo 的经度我使用 react-native-geocoding 将电线转换为地址但地址不会显示

世博会许可码

import React from 'react';
import { Alert,Platform,StyleSheet, Text, View } from 'react-native';
import { Constants, Location, Permissions } from 'expo';

import AppStackNav from '../party/src/nav/appStackNav';


import Geocoder from 'react-native-geocoding';

Geocoder.init('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');

export default class App extends React.Component {
  state = {
    location: null,
    errorMessage: null,
    addressComponent: null,
  };

  componentWillMount() {
    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({
      enableHighAccuracy: true,
    });
    this.setState({ location  });
      let lat = this.state.location.coords.latitude;
      let long = this.state.location.coords.longitude;

      Geocoder.from(lat,long).then(json => 
        {
        var addressComponent = json.results[0].formatted_address;
        this.setState({addressComponent})

          // Alert.alert(this.state.addressComponent)
      }) 
  }

然后尝试在作为道具传递时显示地址

import React, {Component} from 'react';
import {View,Text,StyleSheet,FlatList} from 'react-native'

import styles from '../style/styles';

class SetConn extends Component {
    render(){
        return(
            <View>

                     <Text style={styles.addyComp}>{this.props.addressComponent}</Text> 
            </View>
        );
    }
}


export default SetConn;

Answer 1

react-native-geocoder api 从 human readable address -> latitude longitude 开始工作。

改用google reverse geocoding。

react native react-native-geocoding 地址不会呈现

react native react-native-geocoding address will not render

json

google-geocoder

reactjs

react-native