【发布时间】: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