如何在react native中显示数据库中的标记?

cedebl8k  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(125)

'我想使用自定义标记和数据库中的坐标创建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>
        }
        />
*/
4xrmg8kj

4xrmg8kj1#

你能重新检查一下你的useEffect代码吗

useEffect(() => {
            if (i == 0) {
                console.log(i)
                i = 1
                getData()
            } else {}

        },[]) //---------edit

相关问题