firebase - How can I get my Firebase Data into React-Native Map Marker instead of a Flatlist

Question

Im trying to get all my Firebase Docs/Posts into React-Native-Maps Markers and show them on a map(like AirBnB for example) but couldn't found out the wright way till now..

all my functions are working fine with a flatlist as you can see in the screenshot but how can I get the data into the markers? Ive tried to get the data + renderItem function from the Flatlist tag and put it into the MapView tag but it didn't work because of the open brace/funtion.

Im fairly new in JS/RN.. so im maybe not really able to understand all of the technical terminology. I would be very thankful if someone has a solution for that.. im struggling for several weeks with this issue.

Fire.js function:

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);
}

Working Flatlist (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>
        );
    }
}

标签： firebasereact-nativegoogle-cloud-firestorereact-native-maps

Answer 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>
        );
    }
}