reactjs - 如何在 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 然后渲染简单的图像，但是这种方式非常奇怪

请帮忙，我做错了什么。

标签： reactjsreact-nativereact-reduxreact-native-androidreact-native-navigation

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"
  />
);