reactjs - 如何在 React Native 中使用 svg 图像路径显示 svg 图标？

Question

我想显示 SVG 图标，但找不到显示方式。我尝试使用 React-native-svg 的 Image 和 Use 组件，但它们不起作用。我试着用原生方式来做到这一点，但只显示 SVG 图标真的很难。

示例代码:

<Svg width="80" height="80">
 <Image href={require('./svg/1f604.svg')} />
</Svg>

Answer 1

最初，当我的机器中有 SVG 图标或保存在 Web URL 中时，我遇到了同样的问题。

我探索了 react-native-svg库，但它不允许您包含已创建的 SVG 图标源。我们只能使用该库创建新图标。

后来我找到react-native-svg-uri这确实允许我们使用给定的图标路径。

你可以这样使用它:

import SvgUri from 'react-native-svg-uri';

<SvgUri
    width="200"
    height="200"
    source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
/>