Web端@rnmapbox/maps事件处理器未触发问题求助

问题描述 #

刚接触Mapbox，使用Expo SDK 51、mapbox-gl@3.4.0及@rnmapbox/maps@10.1.25开发时，地图渲染正常且Marker及Marker点击功能可用，但onMapIdle、onLongPress、onTouchStart、onCameraChanged等事件处理器在Web端均未触发，部分事件在iOS端可正常工作。

示例代码 #

import React, { useRef } from 'react';
import MapboxGL from '@rnmapbox/maps';
import { View, ViewProps } from 'react-native';

export default function SmallMapWeb( {
    markerCoordinates,
    markerId,
    ...props
} ) {
    const mapViewRef = useRef( null );
    // console.log( `>this works: ` );
    const handleCameraChanged = ( e ) => {
        console.log( '>handleCameraChanged e:', e );
        console.log( 'Camera changed to:', e.properties );
    };
    return (
        <MapboxGL.MapView
            ref={mapViewRef}
            style={{
                height: '500%',
                flex: 1,
            }}
            onMapIdle={() => console.log( ">>on MapIdle not working " )}
            onLongPress={() => console.log( ">>on long press not working" )}
            onWillStartLoadingMap={() => console.log( ">>onWillStartLoadingMap not working" )}
            onRegionIsChanging={() => {
                console.log( 'region is not working' );
            }}
            onTouchStart={() => {
                console.log( 'touch start not working' );
            }}
            onTouchEnd={() => {
                console.log( 'touch end not working' );
            }}
            onTouchMove={() => {
                console.log( 'touch move not working' );
            }}
            onCameraChanged={() => {
                console.log( 'camera changed not working' );
            }}
            {...props}>
            <MapboxGL.Camera
                zoomLevel={12}
                centerCoordinate={markerCoordinates}
            />
            <MapboxGL.MarkerView coordinate={markerCoordinates} id={markerId || 'Marker Id'}>
                <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                    <View
                        style={{
                            height: 25,
                            width: 25,
                            backgroundColor: 'red',
                        }}
                    />
                </View>
            </MapboxGL.MarkerView>
        </MapboxGL.MapView>
    );
}

解决方案 #

1. 直接绑定mapbox-gl原生事件 #

@rnmapbox/maps的Web端实现基于mapbox-gl-js，但部分RN组件事件在Web端未被完全封装。可以通过map实例手动绑定原生事件：

import React, { useRef, useEffect } from 'react';
// ...其他导入

export default function SmallMapWeb( {
    markerCoordinates,
    markerId,
    ...props
} ) {
    const mapViewRef = useRef( null );

    useEffect(() => {
        if (!mapViewRef.current) return;
        
        // 获取Web端的mapbox-gl实例
        const map = mapViewRef.current.getMap();
        if (!map) return;

        // 定义事件处理函数
        const handleIdle = () => console.log(">>on MapIdle working");
        const handleLongPress = (e) => console.log(">>on long press working", e);
        const handleCameraMove = (e) => console.log(">>camera changed working", e);
        const handleTouchStart = (e) => console.log(">>touch start working", e);

        // 绑定事件
        map.on('idle', handleIdle);
        map.on('longpress', handleLongPress);
        map.on('camera.move', handleCameraMove);
        map.on('touchstart', handleTouchStart);

        // 组件卸载时清理事件监听
        return () => {
            map.off('idle', handleIdle);
            map.off('longpress', handleLongPress);
            map.off('camera.move', handleCameraMove);
            map.off('touchstart', handleTouchStart);
        };
    }, []);

    // ...剩余组件代码
}

注意：Web端事件名称需匹配mapbox-gl-js的原生事件体系，比如onCameraChanged对应camera.move，onMapIdle对应idle。

2. 修复Expo Web事件冒泡问题 #

Expo Web对RN组件的事件处理可能拦截Mapbox的事件传递，给MapView添加pointerEvents: 'auto'样式确保事件正常触发：

<MapboxGL.MapView
    ref={mapViewRef}
    style={{
        height: '500%',
        flex: 1,
        pointerEvents: 'auto' // 添加这一行
    }}
    // ...其他props
/>

3. 调整版本兼容性 #

• 尝试降级mapbox-gl到2.x版本：@rnmapbox/maps v10.x对mapbox-gl v3.x的适配可能存在问题，v2.x版本兼容性更稳定。
• 升级@rnmapbox/maps到最新的v10.x版本，确保适配Expo SDK 51对应的React Native 0.74版本。

内容的提问来源于stack exchange，提问作者Behnam Kamrani