无法在地图

Question

我是React Native的新手，我正在尝试制作一个应用程序，其中包含一个城市周围发生的事件。 我有一个firebase数据库，其中包含与事件相关的数据。 我正试图在地图上显示标记，并在数据库中插入坐标，但没有显示任何内容。没有错误，只是没有显示。

这是我的 firebase：

项目的树视图：

我的 Marker.js

import React from 'react';
import styles from './styles';
import { MapView } from 'expo';

const Marker = ({
  id, latitude, longitude, image, title, categorie, date, hour, city, location, description,
}) => (
  <MapView.Marker
    stopPropagation={true}
    identifier={id}
    coordinate={{
      latitude: latitude,
      longitude: longitude
    }}
    image={image}
    title={title}
    categorie={categorie}
    date={date}
    hour={hour}
    city={city}
    location={location}
    description={description}
  />
);

export default Marker;

我的 Map.js

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

const Map = ({
  region, markers,
}) => (
  <MapView
    style={{flex:1}}
    region={region}
    provider={MapView.PROVIDER_GOOGLE}
  >
    {markers.map(
      (marker) => <Marker key={marker.id} {...marker} />
    )}
  </MapView>
);

export default Map;

并完成我的 Mapa.js

import React, { Component } from "react";
import { View, ScrollView, Text, StyleSheet } from "react-native";
import { MapView, Location, Permissions } from "expo";
import Map from '../components/Map';
import * as firebase from 'firebase';
import _ from 'lodash';



export default class Mapa extends Component {
    constructor(props) {
        super(props);
        this.state = {
            region: {
                latitude: 38.725209,
                longitude: -9.150098,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
            },
            markers: [],
        };
    }

    componentWillMount() {
        this._getLocationAsync();
        this._loadMarkersDatabase();
    }

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

    async _getLocationAsync() {
        const { status } = await Permissions.askAsync(Permissions.LOCATION);
        // status for permission, if accepted or not
        // console.log('status: ', status);
        if (status !== 'granted') {
            alert('Permission to access location was denied');
        }

        const location = await Location.getCurrentPositionAsync({});

        // fetch markers in state
        const markers = this.state.markers;
        // setup new marker coordinates
        const initialMarker = {
            latitude: location.coords.latitude,
            longitude: location.coords.longitude,
        };
        // add marker to firebase with push, so it generates an identifier
        const firebaseMarker = firebase.database().ref('markers').push({
            ...initialMarker
        });
        // new reference from firebase, where we can fetch the generated key
        // console.log(firebaseMarker);
        // fetch generated key
        initialMarker.identifier = firebaseMarker.getKey();
        // add new marker to array loaded from state
        markers.push(initialMarker);

        // set state with new region from user coordinates, and new marker from that location
        this.setState({
            region: {
                latitude: location.coords.latitude,
                longitude: location.coords.longitude,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
            },
            markers,
        });
    };



    render() {
        const { region, markers } = this.state;
        return(
            <Map
                style={styles.map}
                region={this.state.region}
                markers={this.state.markers}
            />
        );
    }
}