Как я могу получить свои данные Firebase в React-Native Map Marker вместо Flatlist? - PullRequest
Новая
       24

Как я могу получить свои данные Firebase в React-Native Map Marker вместо Flatlist?

0 голосов
/ 08 января 2020

Я пытаюсь поместить все свои Документы / Записи Firebase в маркеры React-Native-Maps и показать их на карте (например, AirBnB), но до сих пор не смог найти правильный путь ..

все мои функции работают с плоским списком, как вы можете видеть на скриншоте, но как я могу получить данные в маркеры? Я пытался получить функцию data + renderItem из тега Flatlist и поместить ее в тег MapView, но она не работала из-за открытой скобки / функции.

Я довольно новичок в JS / RN .. поэтому я, возможно, не в состоянии понять всю техническую терминологию. Я был бы очень благодарен, если у кого-то есть решение для этого .. я борюсь с этой проблемой в течение нескольких недель.

Огонь. 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);
}

Рабочий плоский список (карта. 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>
        );
    }
}

1 Ответ

0 голосов
/ 11 января 2020

Я просто хочу сообщить вам, что сам решил проблему.

только что изменил строку кода на моей карте. 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>
        );
    }
}
...