React Native地图无法显示Firebase存储标记问题求助

嘿，我仔细看了你的代码和问题，这几个地方大概率是标记不显示的原因，咱们一步步来修复：

1. 标记ID不匹配，导致React无法正确渲染 #

你在_loadMarkersDatabase里把Firebase节点的key存在了identifier字段，但你的Marker组件接收的是id属性，而且Map组件遍历标记时用的是marker.id作为key——这时候marker.id是undefined的，React没法区分每个标记，直接导致渲染异常。

修复代码：
把_loadMarkersDatabase里的identifier: key改成id: key，和组件的props对应上：

_loadMarkersDatabase() {
  firebase.database().ref('markers').once('value', (snapshot) => {
    const values = snapshot.val();
    if (values) {
      const markers = [];
      _.map(values, (val, key) => {
        const marker = {
          ...val,
          id: key, // 这里把identifier改成id
        };
        markers.push(marker);
      });
      this.setState({ markers });
    }
  });
}

2. Firebase存储的坐标是字符串类型，地图无法识别 #

从你的数据结构来看，latitude和longitude是字符串格式（比如"38.725209"），但MapView.Marker的coordinate要求是数字类型。这种情况地图不会抛出错误，但就是不会渲染标记。

修复代码：
读取Firebase数据时，把这两个字段转换成数字：

_.map(values, (val, key) => {
  const marker = {
    ...val,
    id: key,
    latitude: Number(val.latitude), // 转成数字类型
    longitude: Number(val.longitude) // 转成数字类型
  };
  markers.push(marker);
});

3. 移除Marker组件的非原生props（可选，但避免隐藏问题） #

你给MapView.Marker传递了categorie、date、hour这些非原生props，虽然不会直接导致标记不显示，但可能引发一些隐藏的渲染问题。建议把这些自定义信息放到description里，或者用自定义Callout展示：

修改后的Marker组件：

import React from 'react';
import { View, Text } from 'react-native';
import { MapView } from 'expo';
import styles from './styles';

const Marker = ({ id, latitude, longitude, image, title, categorie, date, hour }) => (
  <MapView.Marker
    stopPropagation={true}
    identifier={id}
    coordinate={{ latitude: latitude, longitude: longitude }}
    image={image}
    title={title}
    description={`${categorie} | ${date} ${hour}`} // 把自定义信息整合到description
  >
    {/* 或者用自定义Callout展示更多内容 */}
    <MapView.Callout>
      <View style={styles.calloutContainer}>
        <Text style={styles.calloutTitle}>{title}</Text>
        <Text style={styles.calloutText}>{categorie}</Text>
        <Text style={styles.calloutText}>{date} {hour}</Text>
      </View>
    </MapView.Callout>
  </MapView.Marker>
);

export default Marker;

4. 调试小技巧（帮你快速定位问题） #

• 在_loadMarkersDatabase里添加console.log(markers)，确认生成的标记数组是否包含正确的坐标和ID；
• 在Map组件里添加console.log(markers)，检查props是否正确传递到子组件；
• 确保Map组件的MapView设置了style={{flex:1}}，同时Mapa里的<Map>组件的style={styles.map}也设置为flex:1，避免地图没占满屏幕导致标记不在可视区域。

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