Question

请尝试帮助我！我需要在android和ios视图上从文件夹“ project / assest / images / test.svg”渲染svg图像。

我尝试过：

解决方案1：<Image source={imagePath}></Image>

解决方案2：

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

解决方案3：首先，我应该将svg文件转换为png，jpeg，然后渲染简单的图像，但是在视图上却很奇怪

请帮助，我在这方面做错了什么。

Answer 1

您可以尝试

<SvgUri width="200" height="200" source={require('./project/assest/images/test.svg')} />

希望这对您有帮助

Answer 2

您还可以尝试使用react-native-svg SVG软件包

例如-

import * as React from 'react';
import { SvgUri } from 'react-native-svg';

export default () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
  />
);

Answer 3

这里有两种在react-native中使用SVG的方法。
一种方法是使用site将SVG转换为JSX。
另一种方法是直接使用字体而不是SVG：

首先，使用SVG文件生成字体。我使用这个site。是fontello。
然后我使用react-native-vector-icons生成图标。有关更多详细信息，请参见其API

如何在React-Native中渲染SVG图像？

3 个答案: