OnPress не работает для маркера в реагировать на родные карты - PullRequest
Новая
       52

OnPress не работает для маркера в реагировать на родные карты

1 голос
/ 24 февраля 2020

Я хотел бы выполнить какое-либо действие при нажатии одной из Markers на карте. Что у меня есть:

1) A MapView, вот так: 

<MapView
    provider={PROVIDER_GOOGLE}
    initialRegion={this.state.region}
    style={styles.map}>
    {this.displayRouteLocations(locations)}
</MapView>

2) Мой метод displayRouteLocations делает следующее: 

displayRouteLocations(locations) {
    return locations.map((location, i) => {
        return (
            <PointMarker
                key={i}
                coordinate={location}
                title={location.name}
                description={location.description}
                onPress={() => alert('test')}
            />
        );
    });
}

3 ) Наконец, PointMarker - это отдельный компонент, подобный этому: 

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

class PointMarker extends Component {
    render() {
        return (
            <Marker
                {...this.props}
                pinColor={'#f6c23d'}
                tracksViewChanges={false}
            />
        );
    }
}

Я не знаю, почему onPress не работает на PointMarker. Я передаю его в response-native-maps Marker, но почему-то он не срабатывает, когда я нажимаю на маркеры.

Я уже пробовал искать ответы в официальной документации реагирующих карт на GitHub. В этом примере они делают почти то же самое (вызывают функцию стрелки onPress). Однако в моем случае это не работает.

Я тестирую приложение на Android.

1 Ответ

0 голосов
/ 24 февраля 2020

Согласно документам вы должны установить stopPropagation в true. Как это: 

displayRouteLocations(locations) {
    return locations.map((location, i) => {
        return (
            <PointMarker
                key={i}
                coordinate={location}
                title={location.name}
                description={location.description}
                onPress={(e) => {e.stopPropagation(); alert('test');}}
            />
        );
    });
}

Для получения дополнительной информации: <Marker /> API компонента

Дополнительная информация 2: Предложение

...