antd-mobile ImageViewer 自定义渲染非图片内容时的手势事件问题解析

问题背景

在使用 antd-mobile 的 ImageViewer 组件时，开发者可以通过 imageRender 属性自定义渲染非图片内容（如视频）。但在实际使用中发现，当用户点击视频的非操作区域时，预览窗口会意外关闭，这影响了用户体验。

问题分析

ImageViewer 组件在控制层（.adm-image-viewer-control）上绑定了手势事件，用于处理图片查看器的常规交互（如点击关闭、滑动切换等）。当开发者自定义渲染视频等非图片内容时，这些手势事件会继续生效，导致以下问题：

1. 点击视频播放器的非控制区域（如视频画面）会触发关闭事件
2. 竖向视频播放时问题尤为明显，因为视频控制栏较小，用户更容易误触

解决方案

方案一：阻止事件冒泡

在自定义渲染的内容外层包裹一个容器，并阻止事件冒泡：

const CustomRender = () => (
  <div onClick={e => e.stopPropagation()}>
    <video controls src="..." />
  </div>
);

这种方法简单有效，能够确保视频播放器的交互不受 ImageViewer 手势事件的影响。

方案二：调整手势事件逻辑

如果项目中有多处需要自定义渲染，可以考虑封装一个高阶组件统一处理事件：

function withStopPropagation(WrappedComponent) {
  return (props) => (
    <div onClick={e => e.stopPropagation()}>
      <WrappedComponent {...props} />
    </div>
  );
}

最佳实践建议

1. 对于简单的自定义渲染场景，直接使用方案一即可
2. 对于复杂项目，建议采用方案二进行统一封装
3. 考虑在自定义内容中添加视觉提示，告知用户点击区域的功能
4. 对于视频内容，确保控制栏足够明显，减少误操作

总结

antd-mobile 的 ImageViewer 组件虽然主要设计用于图片预览，但通过 imageRender 属性可以灵活扩展支持其他媒体类型。理解组件底层的事件机制有助于开发者更好地控制交互行为，提供更优质的用户体验。