如何在 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

您还可以尝试SVG 的react-native-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"
  />
);