如何让react-medium-image-zoom在移动端按返回键时取消图片缩放？

要解决移动端硬件返回键触发页面回退而非关闭图片缩放的问题，可以通过监听浏览器的popstate事件，结合react-medium-image-zoom组件的状态和API实现预期行为，具体步骤如下：

1. 跟踪缩放状态：利用组件的onZoomChange回调，实时获取当前图片是否处于缩放状态。
2. 监听返回事件：组件挂载时监听popstate事件，检测到缩放状态时，阻止默认页面回退行为，调用组件的zoomOut方法关闭缩放，并修正历史记录避免后续异常。
3. 清理事件监听：组件卸载时移除事件监听，防止内存泄漏。

完整代码示例：

import { useState, useRef, useEffect } from 'react';
import Zoom from 'react-medium-image-zoom';
import Image from '你的Image组件路径'; // 替换为实际组件路径

function ZoomableImage() {
  const [isZoomed, setIsZoomed] = useState(false);
  const zoomRef = useRef(null);

  useEffect(() => {
    const handlePopState = (e) => {
      if (isZoomed) {
        e.preventDefault();
        // 调用组件方法关闭缩放
        zoomRef.current?.zoomOut();
        // 修正历史记录，抵消组件缩放时添加的历史条目
        history.pushState(null, document.title, window.location.pathname);
      }
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, [isZoomed]);

  return (
    <Zoom
      ref={zoomRef}
      onZoomChange={(state) => setIsZoomed(state.isZoomed)}
    >
      <Image 
        className="zoom-image" 
        src={`images/exampleImage.jpg`} 
        onError={({ currentTarget }) => {
            currentTarget.onerror = null; // 防止错误循环
            currentTarget.src=`images/default.jpg`;
        }}
        loading="lazy"
      />
    </Zoom>
  );
}

export default ZoomableImage;

关键说明 #

• onZoomChange回调会在缩放状态切换时触发，通过它更新本地状态isZoomed来跟踪当前是否处于缩放模式。
• zoomRef用来获取Zoom组件的实例，从而调用内置的zoomOut方法主动关闭缩放。
• 监听popstate事件时，若处于缩放状态，阻止默认回退行为，同时用history.pushState修正历史栈，确保后续返回操作正常跳转页面。

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