代码之家 › 专栏 › 技术社区 › Kunvar Singh

如何在React Native中呈现svg图像?

react-native-navigation react-native-android react-redux react-native reactjs

Kunvar Singh · 技术社区 · 4 年前

请帮帮我! 我需要在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,然后渲染简单的图像,但在视图中这种方式非常奇怪

请帮忙,我做错了什么。

0 回复 | 直到 4 年前

Vipul 4 年前

你也可以试试 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"
  />
);

-1

Vishal Rabadiya 4 年前

你可以试试这个

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

愿这对你有帮助

-1

Lenoarod 4 年前

以下是在react native中使用SVG的两种方法。
一种方法是将SVG转换为JSX,使用 site .
另一种方法是直接使用字体而不是SVG:

首先,使用SVG文件生成字体。我用这个 site .是方泰罗。
然后我使用react原生向量图标来生成图标。有关更多详细信息,请参见 API

推荐文章

louiedooey · React Native中的重叠和定位元素

6 年前

Mizlul · 如何正确启动分离的React本机应用程序

6 年前

Manoj Goel · 在Android emulator上安装应用程序时配置根项目时出错

6 年前

TheParam sejmy · 运行react native application时,有多个文件提供此模块错误

6 年前

Michael Artman · 通过状态将支柱传递给组件

6 年前

Dave Birnie · 反应本机版本不匹配

6 年前

unknown123 · react native的最佳文件选择器[已关闭]

6 年前

Dude · 反应本机道具,键盘隐藏事件中的参考值未定义?

6 年前

GD- Ganesh Deshmukh · python 3是否与react native兼容?或者我应该按照react文档的建议安装python 2吗?

6 年前

Sarun Dahal · 在windows中连接到远程调试器时响应本机超时

6 年前