React Native中使用Draggable组件时图片边缘被裁切的问题

问题核心是react-native-draggable默认使用renderSize作为图片的固定宽高（正方形），强制将图片拉伸/裁切来填满这个尺寸，导致横竖图都出现裁切。以下是两种可行的解决方法：

方法1：自定义图片渲染，强制完整显示 #

直接替换默认的imageSource，使用renderContent自定义图片组件，通过resizeMode控制图片完整显示：

<Draggable
  x={130}
  y={90}
  renderSize={230}
  renderContent={() => (
    <Image
      source={{ uri: route.params.url }}
      style={{
        width: '100%',
        height: '100%',
        resizeMode: 'contain', // 让图片完整显示，不会被裁切
      }}
    />
  )}
/>

• resizeMode='contain'会保持图片比例，完整显示在renderSize定义的容器内，容器剩余区域会留空白
• 如果希望图片填满容器且保持比例（无裁切），可以结合方法2动态调整容器尺寸

方法2：动态匹配图片比例调整容器大小 #

先获取图片的实际宽高，计算出匹配比例的容器尺寸，让拖拽区域和图片比例一致：

import { Image, useState, useEffect } from 'react-native';

// 初始化默认尺寸
const [containerWidth, setContainerWidth] = useState(230);
const [containerHeight, setContainerHeight] = useState(230);

useEffect(() => {
  // 获取图片实际宽高
  Image.getSize(route.params.url, (imgWidth, imgHeight) => {
    const maxSize = 230; // 限制最大尺寸，避免图片过大
    let newWidth, newHeight;

    // 根据图片横竖比例计算容器尺寸
    if (imgWidth > imgHeight) {
      newWidth = maxSize;
      newHeight = (imgHeight / imgWidth) * maxSize;
    } else {
      newHeight = maxSize;
      newWidth = (imgWidth / imgHeight) * maxSize;
    }

    setContainerWidth(newWidth);
    setContainerHeight(newHeight);
  }, (err) => console.error('获取图片尺寸失败:', err));
}, [route.params.url]);

// 使用自定义尺寸的Draggable
<Draggable
  x={130}
  y={90}
  style={{ width: containerWidth, height: containerHeight }}
  renderContent={() => (
    <Image
      source={{ uri: route.params.url }}
      style={{
        width: '100%',
        height: '100%',
        resizeMode: 'cover', // 填满容器且无裁切，因为容器和图片比例一致
      }}
    />
  )}
/>

这样设置后，拖拽功能正常，图片也不会出现裁切问题。

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