'我想使用自定义标记和数据库中的坐标创建Map。我找不到在获取数据时刷新或重新呈现Map的方法。我使用React native expo和https://github.com/react-native-maps/react-native-maps。
我用平面列表试过了,但是它不能用Map和标记。我也用Map函数试过了,但是我找不到在从数据库中提取数据后重新渲染Map的方法。
我需要一种在使用www.example.com时重新渲染Map的方法array.map或者一种在平面列表中使用Map的方法。谢谢!
这是我的数据结构:完整代码在末尾
var myArray=[{
"location": {
"latitude": 0.413971,
"longitude": 9.724449,
},
"name": "Tower 1",
},{
"location": {
"latitude": 12.413971,
"longitude": 9.724449,
},
"name": "Tower2",
}]
完整代码:
import {
StatusBar
}
from 'expo-status-bar';
import {
Button, StyleSheet, Text, View, Image, Alert, FlatList, ListItem
}
from 'react-native';
import {
styles
}
from "./../assets/style/style";
import MapView from 'react-native-maps';
import {
Marker
}
from 'react-native-maps';
import BikeMarker from '../components/fetch';
import {
useEffect
}
from 'react';
import React, {
useState
}
from 'react';
import {
getTowers
}
from '../components/fetch';
var cord = 1;
var i = 0;
export
default
function Map() {
const pressHandler = () => {
cord++;
}
var myArray = [{
"location": {
"latitude": 0.413971,
"longitude": 9.724449,
},
"name": "Tower 1",
}, {
"location": {
"latitude": 12.413971,
"longitude": 9.724449,
},
"name": "Tower2",
}];
useEffect(() => {
if (i == 0) {
console.log(i)
i = 1
getData()
} else {}
})
function getData() {
getTowers(TowerRetrived)
};
function TowerRetrived(TowerList) {
myArray.push(TowerList)
}
return ( < View style = {
styles.container
} >
< Button onPress = {
pressHandler
}
title = "coco" > < /Button>
<MapView key={cord} style={styles.map} showsUserLocation={true} initialRegion={{
latitude:9.74379,
longitude: 9.74379,
latitudeDelta: 0.922,
longitudeDelta: 0.421,
}}>
{myArray.map(marker => (
<Marker
key={marker.name}
coordinate={marker.location}
>
<Image
source={require('./.. / assets / bikeicon.png ')}
style={{width: 50, height: 50}}
resizeMode="resize"
/>
</Marker>
))}
</MapView>
</View>
);
}
/*
<FlatList
data = {myArray}
keyExtractor={(item) => item.name}
extraData={myArray}
renderItem = {({item}) =>
<View>
<Text key={item.name}>{item.location.latitude}</Text>
</View>
}
/>
*/
1条答案
按热度按时间4xrmg8kj1#
你能重新检查一下你的useEffect代码吗