javascript - OnPress 不适用于 react native map 中的标记

Question

我想在按下 map 上的标记之一时执行一些操作。我有什么:

1) 一个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。我将它传递给react-native-maps Marker，但不知何故，当我按下标记时它不会被触发。

我已经尝试在 GitHub 上的 React-native-maps 官方文档中寻找答案。在 this example它们的作用几乎相同(在 Press 上调用箭头函数)。但是，它不适用于我的情况。

我正在 Android 上测试该应用。

Answer 1

根据文档，您应该设置 stopPropagation为真。像这样:

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 /> Component API

更多信息2:Suggestion