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

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

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

1. 首先，使用SVG文件生成字体。我用这个site。是fontello。
2. 然后我使用 react-native-vector-icons 来生成图标。 更多详情，可以看它的API

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

你可以试试这个

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

希望对你有帮助