[英]How can I add tha value of longitude and latitude
我正在尝试在 react native 中显示项目的详细信息
首先,我使用 api 来使用 json 的不同数据:
class ListScreen extends React.Component {
constructor() {
super();
this.state = {
dataSource: [],
};
this.getRemoteData();
}
static navigationOptions = {
title: 'Home',
};
getRemoteData = () => {
const url = "https://***";
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
data: res.records
});
})
.catch(error => {
console.log("get data error from:" + url + " error:" + error);
});
};
然后我使用功能导航来显示每个项目的特定细节
renderNativeItem = (item) => {
return <ListItem
roundAvatar
subtitle={item.fields.station_name}
onPress={() => this.onPressItem(item)}
/>;
}
onPressItem = (item) => {
this.props.navigation.navigate('Detail', {item: item})
}
最后,我正在尝试显示不同的数据但是对于经度和纬度,我遇到了问题并且不知道如何解决(“未定义不是对象)
render() {
return (
<View>
<FlatList
data={this.state.data}
renderItem={({item}) => this.renderNativeItem(item)}
/>
</View>
);
}
}
class DetailScreen extends React.Component {
render() {
const item = this.props.navigation.state.params.item;
return (
<View style={styles.container}>
<MapView style={styles.map}
initialRegion={{
latitude:item.geometry.coordinate[0] , // don't work
longitude: item.geometry.coordiante[1] , // don't work
latitudeDelta: 0.0,
longitudeDelta: 0.0,
}}
>
<MapView.Marker
coordinate={{latitude: ,
longitude: }}
title={"title"}
description={"description"}
/>
</MapView>
<Text style={styles.text}>name: {item.fields.nbebike}</Text> //work
<Button title="Home" onPress={this._goHome} />
</View>
);
}
谢谢你的帮助 :)
您正在data
上设置状态,但在您定义dataset
的构造函数上
你不应该这样做:
getRemoteData = () => {
const url = "https://***";
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
dataset: res.records
});
})
.catch(error => {
console.log("get data error from:" + url + " error:" + error);
});
};
然后你在调用时变得undefined
<View>
<FlatList
data={this.state.data}
renderItem={({item}) => this.renderNativeItem(item)}
/>
</View>
因为this.state.data
它从未被声明过。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.