[英]React Native SVG Image not loading
I created an svg.我创建了一个 svg。 And want to re-create it in React-Native.并想在 React-Native 中重新创建它。 I use this npm package for it ( https://www.npmjs.com/package/react-native-svg#image ).我使用这个 npm package ( https://www.npmjs.com/package/react-native-svg#image )。
What i created is this我创造的是这个
<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>
);
};
Basically I copied the svg as it is.基本上我照原样复制了 svg。
The problem, the picture is not loading, even If I put a public url, such as this in it.问题,图片加载不出来,即使我放了一个公共的url,比如这个在里面。 The svg with a grey background is not rendering.灰色背景的 svg 未渲染。 The picture will render in webview, though but not in ios or android.图片将在 webview 中渲染,但不会在 ios 或 android 中渲染。
You got any ideas how to fix it?你有任何想法如何解决它? Or a complete other way to achieve something like this?或者一个完整的其他方式来实现这样的事情? Probably easiest way would be to just create a curved picture in photoshop, but thats not really dynamic.可能最简单的方法是在 Photoshop 中创建一张弯曲的图片,但这并不是真正的动态。
Have you tried the using other parameters?您是否尝试过使用其他参数?
<Image
style={{ width: imageWidth, height: imageHeight }}
source={{
uri: '../path/to/url',
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.