如何将我的 Firebase 数据放入 React-Native Map Marker 而不是 Flatlist答案

【问题标题】：How can I get my Firebase Data into React-Native Map Marker instead of a Flatlist如何将我的 Firebase 数据放入 React-Native Map Marker 而不是 Flatlist
【发布时间】：2020-01-08 13:23:46
【问题描述】：

我试图将我所有的 Firebase 文档/帖子放入 React-Native-Maps 标记中并在地图上显示它们（例如 AirBnB），但直到现在才找到正确的方法..

正如您在屏幕截图中看到的那样，我的所有函数都可以在平面列表中正常工作，但我怎样才能将数据放入标记中？我试图从 Flatlist 标记中获取 data + renderItem 函数并将其放入 MapView 标记中，但由于打开的大括号/功能，它不起作用。

我在 JS/RN 方面相当新。所以我可能无法真正理解所有的技术术语。如果有人对此有解决方案，我将不胜感激。我在这个问题上苦苦挣扎了几个星期。

Fire.js 函数：

export async function getMarker(markerRetreived) {
  var marker = [];

  var snapshot = await firebase.firestore()
    .collection('Events')
    .orderBy('createdAt')
    .get()

  snapshot.forEach((doc) => {
    const markerItem = doc.data();
    markerItem.id = doc.id;
    marker.push(markerItem);
  });

   markerRetreived(marker);
}

工作平面列表（map.js）：

class FocusOnMarkers extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      marker: []
    }
  }

  onMarkerReceived = (marker) => {
    this.setState(prevState => ({
      marker: prevState.marker = marker
    }));
  }
  
  componentDidMount() {

  getMarker(this.onMarkerReceived);

}


render() {
  return (
  <SafeAreaView style={styles.container}>
    <FlatList style={styles.container}
        data={this.state.marker}
        renderItem={({ item }) => {
          return (
            <ListItem
              containerStyle={styles.listItem}
              title={`lat: ${item.geopoint.latitude}`}
              subtitle={`lng: ${item.geopoint.longitude}`}
              titleStyle={styles.titleStyle}
              subtitleStyle={styles.subtitleStyle}
              leftAvatar={{
                size: 'large',
                rounded: false,
                source: item.image && { uri: item.image }
              }}
              />
          )
          }
          }
        />
    </SafeAreaView> 
  )
  }
}

React-Native-Map：

    render() {
        return (
            <SafeAreaView style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>
                    <MapView 
                        provider={PROVIDER_GOOGLE} 
                        mapType='hybrid'   
                        showsUserLocation style={{flex: 1}}>
                    <MapView.Marker        
                        data={this.state.marker}
                        coordinate={{latitude: this.state.geopoint.latitude,                         
                        longitude:this.state.geopoint.longitude}}
                        title={("Test")}
                        description={("Test")} 
                    />               
                    </MapView>
                </View>
            </SafeAreaView>
        );
    }
}

【问题讨论】：

抱歉……我编辑了这篇文章。谢谢@Rob！

标签： firebase react-native google-cloud-firestore react-native-maps

【解决方案1】：

我现在只想让你自己解决问题。

只是在我的 map.js 中更改了一行代码 =>

    render() {
        return (
            <SafeAreaView style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>
                    <MapView 
                        provider={PROVIDER_GOOGLE} 
                        mapType='hybrid'   
                        showsUserLocation style={{flex: 1}}>
                    {this.state.marker.map(item     => (
                    <MapView.Marker        
                        coordinate={{latitude: item.geopoint.latitude,                         
                        longitude: item.geopoint.longitude}}
                        title={("Test")}
                        description={("Test")} 
                    /> 
                    )}
                    </MapView>
                </View>
            </SafeAreaView>
        );
    }
}

【讨论】：