React Native SVG图像未加载

Question

我创建了一个 svg。并想在 React-Native 中重新创建它。我为此使用了这个 npm 包 (https://www.npmjs.com/package/react-native-svg#image)。

这是 SVG

我创造的是这个

 <TestApp
      imageWidth={2300}
      imageHeight={1438}
      width={width}
      url={'./url/to/picture'}
      scale1={0.00100794}
      scale2={0.000666667}
    />
const TestApp = ({
  width,
  overlayColor = 'black',
  overlayOpacity = '0.3',
  translate1,
  translate2,
  scale1,
  scale2,
  imageWidth,
  imageHeight,
  url,
}) => {
  const height = (254 / 202) * width;
  const translate = translate1
    ? `translate(${translate1} ${translate2 ? translate2 : ''})`
    : '';
  const scale = scale1 ? `scale(${scale1} ${scale2 ? scale2 : ''})` : '';
  return (
    <Svg
      width={width}
      height={height}
      viewBox={`0 0 ${202} ${254}`}
      fill="none"
    >
      <Mask
        id="breathMask"
        mask-type="alpha"
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width={width}
        height={height}
      >
        <Path
          d="M0 0H201.374V228.761C201.374 228.761 158.683 254 100.687 254C42.6913 254 0 228.761 0 228.761V0Z"
          fill="#C4C4C4"
        />
      </Mask>
      <G mask="url(#breathMask)">
        <Rect
          x="1"
          width={width}
          height={(303 / 254) * height}
          fill="url(#pattern0)"
        />
        <Path
          d="M0 0H201.374V228.761C201.374 228.761 158.683 254 100.687 254C42.6913 254 0 228.761 0 228.761V0Z"
          fill={overlayColor}
          fillOpacity={overlayOpacity}
        />
      </G>
      <Defs>
        <Pattern
          id="pattern0"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <Use href="#image0" transform={`${translate} ${scale}`} />
        </Pattern>
        <Image
          id="image0"
          widht={imageWidth}
          height={imageHeight}
          href="../path/to/url"
        />
      </Defs>
    </Svg>
  );
};

基本上我照原样复制了 svg。

问题，图片加载不出来，即使我在里面放了一个公共的url，比如this。 具有灰色背景的 svg 未呈现。图片将在 webview 中呈现，但不会在 ios 或 android 中呈现。

您有任何解决方法的想法吗？或者一个完整的其他方式来实现这样的事情？ 可能最简单的方法是在 Photoshop 中创建一张弯曲的图片，但这并不是真正的动态。

Answer 1

你试过使用其他参数吗？

<Image
   style={{ width: imageWidth, height: imageHeight }}
   source={{
      uri: '../path/to/url',
   }}
/>