【问题标题】:react native react-native-geocoding address will not renderreact native react-native-geocoding 地址不会渲染
【发布时间】:2018-08-25 22:53:29
【问题描述】:

我正在创建一个应用程序来显示使用本机反应的用户添加

在获得用户许可和纬度,经度使用 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;

【问题讨论】:

  • App中的render方法返回什么?一种想法是它没有正确传递道具。
  • 应用上或应用内,js
  • 我们需要查看整个渲染方法,以便了解与问题相关的所有内容
  • 以及所有正在渲染的 SetCon 组件,这是 app.js 的其余代码
  • this.setState({ location });让 lat = this.state.location.coords.latitude;让 long = this.state.location.coords.longitude; Geocoder.from(lat,long).then(json => { var addressComponent = json.results[0].formatted_address; this.setState({addressComponent}) }) } render() { console.log(" waiting. . "); if (this.state.errorMessage) { console.log (this.state.errorMessage) } else if (this.state.location) { console.log(this.state.addressComponent) } return ( ); } }

标签: json reactjs react-native google-geocoder


【解决方案1】:

react-native-geocoder api 工作于 human readable address -> latitude longitude

请改用google reverse geocoding

【讨论】:

    猜你喜欢
    • 2018-07-01
    • 2018-04-14
    • 1970-01-01
    • 2015-11-03
    • 2022-08-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-20
    相关资源
    最近更新 更多