求助：RCTView的bubblingEventTypes视图配置与原生不匹配，缺失指定事件

1. 扩展JS层RCTView的事件配置 #

在JS端自定义扩展RCTView的bubblingEventTypes，补全缺失的指针事件映射，避免直接修改RN源码：

import { requireNativeComponent } from 'react-native';
import { bubblingEventTypes } from 'react-native/Libraries/Components/View/ViewNativeComponent';

// 补全缺失的指针事件配置
const extendedBubblingEvents = {
  ...bubblingEventTypes,
  topPointerOver: { phasedRegistrationNames: { bubbled: 'onPointerOver', captured: 'onPointerOverCapture' } },
  topPointerLeave: { phasedRegistrationNames: { bubbled: 'onPointerLeave', captured: 'onPointerLeaveCapture' } },
  topPointerMove: { phasedRegistrationNames: { bubbled: 'onPointerMove', captured: 'onPointerMoveCapture' } },
  topPointerEnter: { phasedRegistrationNames: { bubbled: 'onPointerEnter', captured: 'onPointerEnterCapture' } },
  topPointerUp: { phasedRegistrationNames: { bubbled: 'onPointerUp', captured: 'onPointerUpCapture' } },
  topPointerDown: { phasedRegistrationNames: { bubbled: 'onPointerDown', captured: 'onPointerDownCapture' } },
  topPointerOut: { phasedRegistrationNames: { bubbled: 'onPointerOut', captured: 'onPointerOutCapture' } },
  topPointerCancel: { phasedRegistrationNames: { bubbled: 'onPointerCancel', captured: 'onPointerCancelCapture' } },
};

// 创建绑定扩展事件的自定义RCTView组件
const CustomRCTView = requireNativeComponent('RCTView', null, {
  bubblingEventTypes: extendedBubblingEvents,
});

export default CustomRCTView;

2. 确认原生端事件发送逻辑 #

确保iOS/Android原生端已正确实现对应事件的发送逻辑：

iOS端示例（伪代码） #

在RCTView子类中处理指针事件并发送到JS层：

- (void)pointerDown:(UIEvent *)event {
  NSDictionary *eventData = @{@"pointerId": @(event.allTouches.anyObject.pointerId)};
  [self sendEventWithName:@"topPointerDown" body:eventData];
}

// 同理实现topPointerOver、topPointerMove等其他事件的发送逻辑

Android端示例（伪代码） #

在ReactView中添加指针事件监听器并发送事件：

view.setOnPointerListener((v, event) -> {
  switch (event.getActionMasked()) {
    case MotionEvent.ACTION_POINTER_DOWN:
      WritableMap eventData = Arguments.createMap();
      eventData.putInt("pointerId", event.getPointerId(event.getActionIndex()));
      getReactContext().getJSModule(RCTEventEmitter.class).receiveEvent(
          getId(),
          "topPointerDown",
          eventData
      );
      break;
    // 其他指针事件类型的处理逻辑
  }
  return true;
});

3. 验证事件绑定与触发 #

在业务组件中使用自定义的CustomRCTView，绑定事件回调测试：

import CustomRCTView from './CustomRCTView';

function TestComponent() {
  const handlePointerDown = (e) => {
    console.log('指针按下事件:', e.nativeEvent);
  };

  return (
    <CustomRCTView
      onPointerDown={handlePointerDown}
      onPointerMove={(e) => console.log('指针移动:', e.nativeEvent)}
      style={{ width: 300, height: 300, backgroundColor: '#ccc' }}
    />
  );
}

运行应用后测试指针操作（鼠标悬停、移动、点击等），查看控制台日志确认事件是否正常触发。

4. 注意事项 #

• 不要直接修改RN源码中的RCTView配置，避免版本升级时代码冲突；
• 若使用Expo，需确保自定义原生模块配置正确，或通过Expo插件添加事件支持；
• 不同RN版本的bubblingEventTypes结构可能有差异，需对应调整事件注册名的映射规则。

内容的提问来源于stack exchange，提问作者Mathew Azmat