React Native Maps 自定义标记阻塞标记 onPress答案

【问题标题】：React Native Maps Custom Marker blocking Marker onPressReact Native Maps 自定义标记阻塞标记 onPress
【发布时间】：2023-03-17 18:50:02
【问题描述】：

我有自定义标记被渲染到我的地图上，并且完全按照我的意愿进行。我正在使用自定义标记，它是一个视图、图像，然后是图像上特定于事件的文本。

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

我已经对 onPress 事件进行了类似于下面的测试：

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

自定义标记视图会停止 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>
        );
    }

【问题讨论】：

您能否向我们展示如何在 Marker 类中使用您的自定义标记的代码？
@Kuray-FreakyCoder- 添加了代码。还可以使用适用于 iOS 的 onSelect 和适用于 Android 的 onPress 使其工作

标签： reactjs react-native react-native-maps

【解决方案1】：

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

【讨论】：