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

В настоящее время я изучаю карты react-native и react-native-maps (используя typescript 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 - ПРОБЛЕМА

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 отображается / обновляется правильно. Широта / долгота отображаются на моем экране правильно, однако элемент Маркер не отображается вообще. Свойство 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>
        );
    }
}

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

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


react-native react-native-maps
person Nathan Davey    schedule 19.05.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

До

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

После

Обратите внимание на дополнительные операторы возврата внутри и снаружи вызова карты и удаление элемента ‹View›.

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>
        );
    }
}
person Nathan Davey    schedule 19.05.2018