Массив маркеров React-Native-Maps в дочернем компоненте - PullRequest
Новая
       11

Массив маркеров React-Native-Maps в дочернем компоненте

0 голосов
/ 19 мая 2018

В настоящее время я изучаю карты реакции-натива и реакции-натива (используя машинопись ES6), и у меня возникли некоторые проблемы с отображением маркеров, поскольку они просто не отображаются.Я попытался разделить свою логику на компоненты, которые имеют смысл для меня, но мне интересно, если это причина, по которой я не могу заставить их отображать.

У меня есть следующее:

Основной компонент карты 

<MapView style={styles.map}
         region={this.props.region}
         showsUserLocation={true}
         followsUserLocation={false}>
    <View>
        <SearchCircle />
        <MarkerList />
    <View>
 <MapView>

SearchCircle

SearchCircle работает отлично, и код содержит: 

import { Circle } from 'react-native-maps';

...

class SearchCircle extends React.Component<SearchProps> {
    render() {
        return (
            <Circle center={this.props.user.location}
                    radius={this.props.map.searchRadius}
                    fillColor={'rgba(230,238,255,0.5)'}
                    strokeColor={'#1A66FF'}
                    strokeWidth={1} />
        );
    }
}

MarkerList - ISSUE

MarkerList - это компонент, который не отображается правильно.Он содержит: 

class MarkerList extends React.Component<MarkerListProps> {

    // render our contacts
    render() {
        return (
            <View>
                {this.props.markerlist[0] != undefined && this.props.markerList.map((marker, index) => (
                    this.renderMarker( marker, index )
                ))}
            </View>
        );
    }

    renderMarker( marker: MarkerEntry, index: number ) {
        return (
            <View key={index}>
                <Marker coordinate={marker.location} title={marker.title} />
                <Text>{'Lat: ' + marker.location.latitude + ', Long: ' + marker.location.longitude}</Text>
            </View>
        );
    }
}

Компонент MarkerList вызывает метод render () при обновлении состояния (когда я обновляю расположение маркеров), НО только элемент Text правильно отображает / обновляет.Lat / Lng отображается правильно на моем экране, однако элемент Marker вообще не отображается.Свойство markerlist для компонента MarkerList представляет собой список типа MarkerEntry , который содержит следующее: 

interface MarkerEntry {
    title: string
    location: LatLng
}

Независимо от того, что я пытаюсь, я не могу получить маркерысделать из этого массива.Если я статически определяю маркеры, то все работает просто отлично, но с моим списком массивов свойств map они никогда не отображаются.

Статический пример, который работает 

class MarkerList extends React.Component<MarkerListProps> {

    // render our contacts
    render() {

        let marker = {
            id: 'Test',
            location: {
                latitude: -31.970097415447232,
                longitude: 115.92362245895334
            }
        };

        let markerArray: any[] = [];
        markerArray.push( marker );

        return (
            <View>
                {markerArray[0] != undefined && markerArray.map((c, index) => (
                    <Marker key={index} coordinate={c.location} title={c.id} />
                ))}
            </View>
        );
    }
}

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

Заранее спасибо!

1 Ответ

0 голосов
/ 19 мая 2018

Итак, мне удалось решить мою проблему и я решил оставить свое окончательное решение здесь для всех, кому это нужно.Проблемы были связаны с тем, как я определял MapView , а также с тем, как я возвращал карту результатов.

Компонент карты

Для основного компонента карты мне пришлось удалить дочернюю запись , которую я определил.

До 

<MapView style={styles.map}
         region={this.props.region}
         showsUserLocation={true}
         followsUserLocation={false}>
    <View>**
        <SearchCircle />
        <MarkerList />
    <View>
 <MapView>

После 

<MapView style={styles.map}
         region={this.props.region}
         showsUserLocation={true}
         followsUserLocation={false}>
    <SearchCircle />
    <MarkerList />
 <MapView>

MarkerList

Вторая часть, которую мне пришлось изменить, была функция рендеринга и ее синтаксис в функции рендеринга.

До 

class MarkerList extends React.Component<MarkerListProps> {
    // render our contacts
    render() {
        return (
            <View>
                {this.props.markerlist[0] != undefined && this.props.markerList.map((marker, index) => (
                    this.renderMarker( marker, index )
                ))}
            </View>
        );
    }

    renderMarker( marker: MarkerEntry, index: number ) {
        return (
            <View key={index}>
                <Marker coordinate={marker.location} title={marker.title} />
                <Text>{'Lat: ' + marker.location.latitude + ', Long: ' + marker.location.longitude}</Text>
            </View>
        );
    }
}

После

Обратите внимание на дополнительные операторы return вне и внутри вызова карты и удаление элемента . 

class MarkerList extends React.Component<MarkerListProps> {
    // render our contacts
    render() {
        return this.props.markerList.map((marker, index) => {
            return( this.renderMarker( marker, index ));
        });
    }

    renderMarker( marker: MarkerEntry index: number)  {
        return (
            <View key={index}>
                <Marker coordinate={marker.location} title={marker.title} />
            </View>
        );
    }
}
...