React Native Expo中如何从数据库加载并刷新地图标记？

你当前代码的核心问题是未通过React状态管理标记数据，直接修改普通变量/数组无法触发组件重新渲染。以下是两种可行的解决思路：

方案一：使用useState + array.map 实现标记更新 #

1. 将标记数据转为React状态 #

把原来的普通数组替换为useState声明，让React能够监听数据变化：

const [markers, setMarkers] = useState([
  {
    "location": {
      "latitude": 0.413971,
      "longitude": 9.724449,
    },
    "name": "Tower 1",
  },
  {
    "location": {
      "latitude": 12.413971,
      "longitude": 9.724449,
    },
    "name": "Tower2",
  }
]);

2. 修正数据获取与状态更新逻辑 #

去掉全局变量i，用useEffect空依赖数组确保仅在组件挂载时获取一次数据；更新状态时必须创建新数组（不能直接修改原数组）：

useEffect(() => {
  getData();
}, []); // 空依赖数组保证只执行一次

function getData() {
  getTowers(TowerRetrived);
};

function TowerRetrived(TowerList) {
  // 若TowerList是单个标记对象，用此写法
  setMarkers(prev => [...prev, TowerList]);
  // 若TowerList是标记数组，展开后合并：
  // setMarkers(prev => [...prev, ...TowerList]);
}

3. 在MapView中渲染标记 #

直接用状态数组的map方法生成Marker，状态更新时React会自动重新渲染地图：

<MapView 
  style={styles.map} 
  showsUserLocation={true} 
  initialRegion={{
    latitude:9.74379,
    longitude: 9.74379,
    latitudeDelta: 0.922,
    longitudeDelta: 0.421,
  }}
>
  {markers.map(marker => (
    <Marker
      key={marker.name} // 建议用数据库返回的唯一ID代替name，避免重复
      coordinate={marker.location}
    >
      <Image 
        source={require('../assets/bikeicon.png')} // 修正路径中的多余空格
        style={{width: 50, height: 50}}
        resizeMode="resize"
      />
    </Marker>
  ))}
</MapView>

方案二：使用FlatList优化大量标记渲染 #

如果标记数量较多，FlatList的按需渲染能提升性能，正确用法是将FlatList嵌套在MapView内部：

<MapView 
  style={styles.map} 
  showsUserLocation={true} 
  initialRegion={{
    latitude:9.74379,
    longitude: 9.74379,
    latitudeDelta: 0.922,
    longitudeDelta: 0.421,
  }}
>
  <FlatList
    data={markers}
    keyExtractor={(item) => item.name} // 优先使用唯一ID
    renderItem={({item}) => (
      <Marker
        coordinate={item.location}
      >
        <Image 
          source={require('../assets/bikeicon.png')}
          style={{width: 50, height: 50}}
          resizeMode="resize"
        />
      </Marker>
    )}
  />
</MapView>

额外注意事项 #

• 确保key属性唯一：不要用数组索引，优先使用数据库返回的ID，避免渲染异常。
• 路径修正：原代码中图片路径的空格会导致资源找不到，需改为../assets/bikeicon.png。
• 移除无效全局变量：原来的cord和i属于冗余全局变量，改用状态或useEffect依赖管理即可。

内容的提问来源于stack exchange，提问作者pauhl