Question

有没有能让我显示从外部URL加载的SVG图像的软件包？

我尝试使用react-native-svg-image / react-native-svg-uri及其派生工具，但它们均无法正常工作-React-native是否有任何非死包能胜任？

这是svg-img-uri抛出的示例错误

<SvgUri width="24" height="24" source={{ uri: 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/flags/1x1/ad.svg' }} />

Text strings must be rendered within a <Text> component.

This error is located at:
    in RNSVGDefs (at Defs.js:8)

Answer 1

react-native-svg 现在支持从在线 uri 显示 svg

import { SvgUri } from 'react-native-svg';

export default () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://demo.com/assets/your/image.svg"
  />
);

参考https://github.com/react-native-svg/react-native-svg#use-with-content-loaded-from-uri

Answer 2

URL周围没有引号。可能是问题所在

<SvgUri 
 width="24" 
 height="24" 
 source={{ uri: 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/flags/1x1/ad.svg'}} />

Answer 3

此Github issue可能会对您有所帮助。

如果仍然无法成功，您仍然可以使用https://www.smooth-code.com/open-source/svgr/playground/将SVG文件转换为React Native组件（不要忘记在左侧面板中切换React-native）

在React Native中从URL显示外部SVG图像

3 个答案: