如何使用react-zoom-pan-pinch实现全屏图片加载时自动居中？

问题根因 #

你遇到的问题核心是图片异步加载导致的尺寸时机问题：组件初始化执行centerOnInit的时候，图片还没加载完成，此时图片宽高为0，居中计算自然失效；等你点击页面时，图片已经加载完毕，组件能获取到真实尺寸，触发居中就正常了。换成div能正常居中，是因为div的尺寸是即时可获取的，不存在异步加载的问题。

可行解决方案 #

方案一：监听图片加载完成后手动触发居中 #

利用图片的onLoad事件，在图片加载完成后调用库的centerView方法强制居中，步骤如下：

1. 从库中引入useControls钩子，用来获取控制方法：

import { TransformComponent, useControls } from "react-zoom-pan-pinch";

2. 在组件内部获取centerView方法：

const { centerView } = useControls();

3. 给图片添加onLoad事件，加载完成后调用centerView，加个小延迟确保尺寸计算完成（部分场景可能需要）：

<img
  src="你的图片地址"
  alt="全屏图片"
  onLoad={() => {
    setTimeout(() => centerView(), 50);
  }}
/>

4. 保留centerOnInit属性作为兜底，不影响后续逻辑：

<TransformComponent
  centerOnInit
  limitToBounds={false}
  disablePadding
>
  {/* 图片元素 */}
</TransformComponent>

方案二：已知图片尺寸时直接设置初始偏移 #

如果你的图片宽高是固定已知的，可以直接计算初始偏移量，通过initialPositionX和initialPositionY设置：

<TransformComponent
  initialPositionX={(window.innerWidth - 图片宽度) / 2}
  initialPositionY={(window.innerHeight - 图片高度) / 2}
  limitToBounds={false}
  disablePadding
>
  <img src="你的图片地址" alt="全屏图片" />
</TransformComponent>

验证说明 #

本地环境100%复现是因为图片加载的时机完全暴露了这个异步问题，而codesandbox需要多次刷新才出现，是因为缓存或加载速度的波动导致偶尔图片在组件初始化前加载完成。

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