Question

我将自定义标记渲染到我的地图上，并且完全按照我的意愿进行。我使用的是“自定义标记”，它是“视图”，“图像”，然后是图像上特定于事件的文本。

由于某种原因，使用自定义标记视图阻止了Marker组件上的onPress。

我已经测试了与以下类似的onPress事件：

<Marker onPress={() => {console.log('Pressed')}}> ...，但仅当我在Marker组件内删除自定义标记视图时才记录新闻。

自定义标记视图是否有理由停止onPress？如何解决此问题并为自定义标记触发onPress事件？

在下面添加了完整的代码，以使外观更好。目前，它正在工作，但仅是因为我在iOS上使用onSelect事件。 onPress的工作方式与Android（而非iOS）相同。

<MapView 
    style={styles.map} 
    ref={ map => {this.map = map }}
    region={this.state.region}
    onRegionChangeComplete={this.onRegionChange}
    rotateEnabled={false}
    loadingEnabled={true}
>
    {matches.map((marker, index) => {
            return (
                <MapMarker 
                    key={index}
                    mapMarker={marker}
                    handlePress={() => {
                        this.map.animateToRegion({
                            latitude: marker.location.latlng.latitude,
                            longitude: marker.location.latlng.longitude
                        }, 100)
                    }}
                />
            )
    })} 
</MapView>

MapMarker.js

render() {
        const { mapMarker } = this.props;

        return (
            <Marker
                ref={(ref) => {this.markerRef = ref; }}
                coordinate={mapMarker.location.latlng}
                title={mapMarker.location.streetName}
                stopPropagation={true}
                pointerEvents='auto'
                onPress={() => console.log('pressed')}
                onSelect={() => {
                    this.props.handlePress();
                }}
            >

                <CustomMapMarker 
                    gameType={mapMarker.matchType} 
                    isSanctioned={mapMarker.isSanctioned}
                    startDate={mapMarker.startAt}
                />

                <Callout style={styles.customCallout}>
                    <CustomMarkerCallout markerInfo={mapMarker} /> 
                </Callout>
            </Marker>
        );
    }

Answer 1

通过添加特定于iOS的onSelect解决了该问题。 onPress仅适用于Android，因此不知道这是否是正确的答案，但目前为止对我有用。

React Native Maps Custom Marker onPress阻止标记

1 个答案: