如何在React Native中渲染svg图像？
在React Native中渲染SVG图像可以通过使用第三方库react-native-svg来实现。以下是详细的步骤：
- 首先，确保你的React Native项目已经安装了react-native-svg库。可以通过运行以下命令来安装：
npm install react-native-svg --save- 在需要使用SVG图像的组件文件中，导入react-native-svg库：
import Svg, { Path } from 'react-native-svg';- 创建一个SVG组件并在其中定义路径（Path）元素来描述SVG图像的形状。例如：
<Svg height="100" width="100">
<Path d="M50 0 L100 100 L0 100 Z" />
</Svg>在上面的例子中，我们创建了一个100x100的SVG容器，并在其中绘制了一个三角形。
- 可以通过设置样式来调整SVG图像的外观。例如，可以使用fill属性来设置填充颜色，stroke属性来设置边框颜色和宽度等。
<Svg height="100" width="100">
<Path d="M50 0 L100 100 L0 100 Z" fill="red" stroke="blue" strokeWidth="2" />
</Svg>在上面的例子中，我们将三角形的填充颜色设置为红色，边框颜色设置为蓝色，边框宽度设置为2。
- 如果需要使用更复杂的SVG图像，可以使用其他SVG元素（如Circle、Rect等）来创建所需的形状。
综上所述，通过使用react-native-svg库，我们可以在React Native中轻松地渲染SVG图像。这为开发人员提供了更多自定义和创意的可能性，适用于需要使用矢量图形的各种应用场景。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
我想在背景图像的“前层”上渲染一张svg图像。
当视图加载时，只有背景图像出现，并且我没有得到任何错误。图像是否正在加载(在背景中)？
以下是我到目前为止所做的工作：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Image,
} from 'react-native';
import SVGImage from 'react-native-svg-image';
export default class S
浏览 1提问于2017-08-10得票数 0
我正在开发一个react原生应用程序。我的项目中有一堆本地的SVG文件。我想使用我的自定义组件来渲染文本和SVG图像。 下面是我的自定义组件，用于呈现静态SVG文件的Text和Image： import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
浏览 146提问于2020-07-25得票数 0
我想使用svg图像代替png图标，因为png渲染的图标质量不好。我有以下规范
"react-native": "^0.42.3",
"react-native-svg": "4.3.0",
"react": "^15.4.1"
在"npm install“之后，当我在我的项目中导入react-native-svg时，它抛出了以下错误
ERROR in ./node_modules/react-native-svg/lib/SvgTouchableMixin.js
Module not fou
浏览 1提问于2017-09-25得票数 0
3回答
请帮帮我！我需要从我的文件夹"project/assest/images/test.svg“在android和ios视图中渲染svg图像。
我试过了：
解决方案1：<Image source={imagePath}></Image>
解决方案2：
import SvgUri from 'react-native-svg-uri';
<View>
<SvgUri
width="200"
height="200"
source={{uri:'htt
浏览 0提问于2019-11-28得票数 6
1回答
我已经开始了一个项目，使用‘创建-反应-本机-应用’，我不知道如何渲染.svg文件。我尝试了所有svg的库，比如react --svg-uri、react本机-svg-映像、msvgc (将.svg转换为使用react本机-svg来响应组件)，但这些都没有帮助。有时，当我在手机上运行应用程序预览(带有世博)时，它会立即崩溃，有时它只显示加载动画，而不是显示实际的.svg图像。没有错误-它只是不会渲染svgs。
例如，此代码显示加载动画。
import SVGImage from 'react-native-svg-image';
<View style={styles.
浏览 1提问于2017-05-05得票数 1
回答已采纳
我在React Native中创建了自适应布局，所以我要做的所有事情就是让svg图像按屏幕大小缩放。我如何使用react- Native -svg在React native中做到这一点？
浏览 2提问于2020-09-10得票数 0
18回答
我想显示svg文件(我有一堆svg图像)，但是我找不到显示的方法。我试着使用图片，和使用的组件，但是他们不能工作。我试着用原生的方式来做这件事，但是仅仅显示svg图像真的很难。
示例代码：
import Svg, {
Use,
Image,
} from 'react-native-svg';
<View>
<Svg width="80" height="80">
<Image href={require('./svg/1f604.svg')} />
</Svg
浏览 365提问于2016-08-08得票数 145
1回答
我正在使用"react-native- svg -uri“库从云中加载svg文件。
考虑下面的代码片段：
<SvgUri
width={wp("6%")}
height={wp("6%")}
source={{ uri: "https://wasfatimages.s3.ap-south-1.amazonaws.com/contain/vegetarian.svg" }}
/>
此特定SVG文件URL不起作用。但是使用相同的URL，我可以在浏览器中看到
浏览 6提问于2021-02-23得票数 1
1回答
如何在react / typescript中动态渲染/导入图像？
我在React中使用Typescript。
以下是我想要实现的目标。
但这是行不通的。它没有解析表达式{ 'assets/icons/' + media + '.svg'}。
<div className="medias">
MEDIAS.map((media) =>
(<img src={ 'assets/icons/' + media + '.svg'} />)
浏览 3提问于2021-04-19得票数 1
如何在android版应用上使用react-native渲染svg？我发现了，但它只适用于IOS
浏览 1提问于2015-12-19得票数 1
我正在努力在React Native中创建react-native-svg动画。我也用react-native-svg-transformation尝试了他们建议的方法，但它不适合我的情况，因为我要处理很多文件并动态地呈现它们。这是我的渲染文件：
import React from "react";
import { View, Text } from "react-native";
import { SvgXml } from "react-native-svg";
import SvgAssets from "../resources
浏览 1提问于2020-03-10得票数 1
1回答
我的问题基本上是这样的:我有一堆svg图像都存储在一个.js文件中，如下所示 import React from 'react'
export const React = () =>
<svg width="40" height="40" viewBox="0 0 256 256"><ellipse cx="238.456" cy="39.252" rx="28.346" ry="26.522" fill="#c90016&
浏览 11提问于2019-03-22得票数 0
回答已采纳
2回答
我想把它导入到我的react原生项目的Appjs视图中。
我尝试了许多方法，但都不起作用。我的意思是，我想在我的视图中渲染它。如何在我的Appjs中导入和显示此文件。有没有人能帮帮我，这对我很重要。
下面是我的代码：
import ForwardRef from '../../constants/UI_login/Home_Landing_Page/BackgroundComponent'
import React from "react";
import Svg, { Defs, LinearGradient, Stop, Rect } from "r
浏览 0提问于2019-02-03得票数 2
1回答
我正在使用' react - native -remote- SVG‘在我的react原生expo应用程序中显示SVG图像。一切都在模拟器/设备上显示得很好，直到我在世博会上发布了应用程序，此时所有SVG图像都消失了。
示例代码：
import Image from 'react-native-remote-svg';
<Image
style={styling.imageStyle}
source={require('../res/images/sampleImage.svg')} />
浏览 0提问于2018-03-25得票数 2
2回答
在我的vue原生应用程序中，我希望显示本地的SVG图像。
为此，我尝试了react-native-svg-uri ()。我使用它的步骤如下：
npm安装react-native-svg-uri --save
react-native链接react-native-svg
然而，当我尝试使用以下任何方法在屏幕上呈现svg时，它什么也不显示：-
<svg-uri width="200" height="200" source="{uri:'http://thenewcode.com/assets/images/thumbnails/homer-s
浏览 3提问于2019-05-15得票数 1
1回答
我在create-react-app中使用Material，并且在抽屉标题中呈现.svg文件有困难。我得到一个破碎的图像渲染，而不是我所期望的.svg。任何帮助都将不胜感激。谢谢!
<DrawerHeader>
<div>
<Icon classes={{root: classes.iconRoot}}>
<img className={classes.imageIcon} src="/assets/logo.svg"/>
</Icon>
</div>
浏览 3提问于2022-03-19得票数 0
回答已采纳
我正在运行这个程序来显示SVG图像
import React, { Component } from 'react';
import { View } from 'react-native';
import Expo from './assets/check-mark.svg';
import SVG from 'react-native-svg';
export default class MyApp extends Component {
render(){
return (
<View style={{
浏览 1提问于2021-01-29得票数 1
我有一个csv文件，如下所示。我使用了react-native-svg-uri来呈现csv文件，但是由于某些原因没有呈现。csv文件的其他部分渲染正常。
下面是csv文件的摘录。
<text id="PAY" font-family="BentonSans-Bold, BentonSans" font-size="20" font-weight="bold" line-spacing="38" fill="#1274B8">
<tspan x="87" y=
浏览 0提问于2016-11-11得票数 1
我使用<Image>标签在我的项目中显示图像，但是它不能在iOS上显示svg图像，所以我使用来自react-native-svg的<SvgUri>而不是<Image>，但是现在如果我尝试显示除svg之外的任何图像，它会抛出错误。有没有库可以在iOS和安卓设备上同时显示svg和非svg图像？
浏览 28提问于2020-08-27得票数 0
我有一个SVG动画图像：
在chrome浏览器中查看时，它的动画效果很好。
然而，当我尝试将其导入到我的react原生项目中时(例如通过)，虽然它可以显示svg图像，但它没有动画。
这是我导入svg的方式：
import { SvgUri } from 'react-native-svg';
<SvgUri
width="85%"
height="85%"
uri="http://test.impossible-creations.com.hk/crown.svg"
/>
实际上，在Reac
浏览 20提问于2021-03-15得票数 0
回答已采纳
我有一个静态图像，我裁剪一个圆圈，现在我想保存这个修改的图像在我的设备的画廊，有人知道如何做吗？我正在使用TypeScript。
裁剪图像：
import React from "react";
import { SafeAreaView } from "react-native";
import Svg, { Circle, ClipPath, Defs, Image } from "react-native-svg";
export const App = () => {
return (
<Saf
浏览 18提问于2021-12-08得票数 1
1回答
您好，在我们的react原生应用程序中有以下代码： import { SvgCssUri } from 'react-native-svg';
<SvgCssUri style={styles.osIcon} uri={'https://mon.zappiehost.com/images/os/' + props.data.icon} /> 我甚至尝试过使用简单的SvgUri (而不是SvgCssUri) 但图像仍然加载时没有一些内容(黑色颜色)： ? ? 下面是使用的原始SVG图像：https://raw.githubuserconte
浏览 25提问于2021-07-25得票数 1
我尝试将本机版本从0.68.0升级到最新版本0.69.1，通过使用这个命令npx react-native upgrade，它会抛出一个错误，下面是图片链接(错误)
"dependencies": {
"@react-native-async-storage/async-storage": "^1.17.7",
"@react-navigation/native": "^6.0.11",
"@react-navigation/native-stack": "^6.7
浏览 10提问于2022-07-18得票数 0
在我的react原生项目中，我正在尝试让我的微调器旋转。我的微调器是一个SVG组件<Spinner />。它是这样的： import * as React from 'react';
import Svg, {Path} from 'react-native-svg';
function Spinner(props) {
return (
<Svg width={24} height={24} fill="none" {...props}>
<Path
...
浏览 31提问于2020-09-17得票数 4
我正在React中构建一个SVG组件，并使用svg-to-react cli将SVG文件转换为React组件。 我想在这个组件中加载和渲染额外的svg文件，并使用SVG image tag，如下所示。它工作得很好，我可以将图像的href属性绑定到导入的SVG。 import Whole from "../svg/notes/whole.svg";
export default (props: any) => {
return (
<svg height={125} width={97} {...props}>
...
&
浏览 18提问于2019-12-15得票数 0
So here is my animation 正如您所看到的，底部边框是圆形的，但当我按下svg图像时，需要将其更改为正常边框。而且我只需要将其设置为底部边框。我尝试通过创建一个钩子来实现： const [isRoundBorder, setIsRoundBorder] = useState(1); 然后编写一个条件渲染： isRoundborder ?
Whatever :
Whatever But here is what is happening if I do so 所以看起来很糟糕。如何在React Native中改进这一点？
浏览 15提问于2020-11-30得票数 0
我需要在metro.config中为react原生应用程序使用多个babelTransformerPath。 SVG的react-native-svg-transformer和模糊处理的react-native-obfuscating-transformer。 React-Native - 0.64.0 React - 17.0.1
浏览 108提问于2021-09-03得票数 0
回答已采纳
我尝试在单击图像时使用触摸事件位置来开始从该位置到屏幕中心的图像动画。
当react native使用全屏时，这不是问题。但是，当React Native在混合应用程序中运行，并且React Native渲染的屏幕不会占据整个屏幕时(如拆分视图模式或iPad上的弹出视图)，nativeEvent坐标都是相对于React Native渲染的视图，而不是实际屏幕。
我想要得到触摸发生的实际屏幕坐标。有什么解决方法可以实现这一点吗？
根据的文档，所有事件都是相对于根元素的。我假设这意味着react native的根元素。
我做了一些实验，react原生Dimensions确实给了我正确的屏幕尺寸。我
浏览 16提问于2018-07-20得票数 0
回答已采纳
我已经能够在模拟器中启动react原生“SVG”应用程序(来自本教程)，现在我想在react原生应用程序中呈现AwesomeProject。
我尝试替换返回的内容(...)语句和包含一个SVG椭圆代码片段的SVG元素，然后模拟器屏幕变成红色(可能是因为Microsoft使用了blue：)。
我的猜测是解决方案涉及到react-native中的WebView组件，但是我不清楚如何在这个组件中嵌入SVG代码。
顺便说一句，最终我想在一个原生的react应用程序中渲染这些图形效果：
建议和代码示例肯定会很受欢迎：)
浏览 0提问于2015-03-27得票数 0
2回答
我正在测试react-native，并且我正在尝试创建一个简单的lineChart，它可以根据属性的变化重新绘制。我有一个父组件HomeScreen，它将整数数组作为属性传递给LineChart子组件。但是，LineChart永远不会绘制。
我试着传入一个已经初始化的数组，并带有虚拟值。然后，lineChart子组件将呈现，但不会在随后的状态更改时重新呈现。
我在react-devtools中检查了state和props的实际值，子组件确实收到了props并更新了状态。我怎么才能让图表渲染我传递的道具呢？
更新:因此，我从这里的回复中获得了建议，并使组件具有功能性。图表现在呈现，但属性类型仍然
浏览 0提问于2019-03-30得票数 1
环境信息
响应本地信息输出：
"react": "16.8.6",
"react-native": "0.60.4"
图书馆版本: 1.2.3
复制步骤
使用react本机-cli创建一个新项目。
将一个SVG文件导入到项目的src文件夹中(我下载并使用了react本机-svg文档中提到的homer映像进行测试)。
将svg导入为import MySVG from './mysvg.svg';
将MySVG传递给SvgUri组件的svgXmlData属性
预期行为
图像应该在屏幕上呈现。
可
浏览 0提问于2019-08-08得票数 2
我可以使用react-native-qrcode-svg包创建具有单值的二维码。但不能添加多个值，如姓名、电子邮件等。
我已经尝试过这些：
包：
npm安装react-native-svg --save
react-native链接react-native-svg
npm install react-native-qrcode-svg --save
单值生成二维码的代码。
import * as React from 'react';
import QRCode from 'react-native-qrcode-svg';
export default cl
浏览 3提问于2020-07-03得票数 1
1回答
我想使用图像uri和渲染我的图像，但它不显示，我不知道为什么
这是我的代码，我正在使用react-native
我想使用图像uri和渲染我的图像，但它不显示，我不知道为什么
以下是我的代码
import React from 'react';
import styled from 'styled-components/native';
import {FlatList,
Dimensions,
ScrollView,
浏览 5提问于2021-02-22得票数 0
我在Reactinative0.43.3开发了一个项目
我犯了一个错误，我只在iOS中开发和测试所有项目。(在那里工作很好)
问题是当我试图生成APK上传到PlayStore时，并在我发现的错误的设备上进行测试：
不能将android.widget.imageview转换为android.view.viewgroup
我的主要问题是如何显示错误。是在死的红色屏幕上，我不知道如何在反应本机中找到发生错误的线和组件。我想我可能无法意识到这一点，因为javascript代码已经编译好了。
不管怎样，我不知道怎么解决这个问题。
我认为可能是因为我在图像中使用了旋转器(以显示正在加载的图像)，类似于：
浏览 7提问于2017-06-08得票数 0
2回答
我尝试过"react-native-remote- SVG“和"react-native-svg-image"；它们都无法呈现SVG文件。
如何在原生反应中处理SVG？
示例代码：
import SVGImage from 'react-native-svg-image'
const EmailLogo = require('../static/others/Email.svg');
// Render etc....
<ButtonContainer>
浏览 11提问于2018-01-27得票数 1
因为有两种方法可以在react-native中渲染图像。一个是本地存储的图像，可以通过require访问，第二个是网络获取的图像，用户可以通过传递uri进行访问。
我想知道，对于图标/符号等小图像，哪种方式应该是首选的？既然在Android的react-native中没有回退选项，那么在性能/渲染方面两者的优缺点是什么？
浏览 0提问于2018-03-06得票数 1
我想从插画师生成的SVG文件中呈现图像，我使用的是react-native-svg react-原生的 0.59、react-native-svg-uri，和--这是我的jsx：
<View style={styles.aboutSection}>
<SvgUri
width="150"
height="150"
source={require('../../assets/images/logo_blue.sv
浏览 0提问于2019-05-23得票数 5
回答已采纳
问题是：
我有一个react本机项目，它使用react-native-svg导入我的标识。我用react-navigation创建了我的自定义底部标题栏，如下所示：
因此，问题是，当我的adobe文件(仅是紫色按钮)中的svg看起来像这样时，我就导出了它：
所以你可以看到，显然有一个影子，但不是在我的项目。我做错了什么？
我使用的组件如下：
import Logo from "../assets/icons/add_icon.svg"
然后用<Logo />渲染它
下面是svg (顺便说一下，当我用浏览器打开它时，它会显示阴影)：
为什么我的应用
浏览 5提问于2020-04-08得票数 2
我有这段代码，它应该画出复选框。 这是我的Hashtags.js文件： import React, { useState } from 'react';
import {StyleSheet, View, Image} from 'react-native';
import { CheckBox } from 'react-native-elements';
const HashtagsList =[
{checked: false, title: '#tip1'},
{checked: false, title: &#
浏览 11提问于2020-01-04得票数 0
回答已采纳
4回答
在这两个库的帮助下，我使用了很多svg映像
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",
然后，我可以导入和使用svg图像，如下所示。
import Logo from '../assets/svg/img.svg';
...
...
<Logo height={60} />
...
下面是我的自定义按钮
***imaginary part // import Logo from '../ass
浏览 4提问于2020-09-29得票数 2
回答已采纳
2回答
共享QR反应本地
、、、、
我是新的反应/反应本地人。我试着分享一个QR代码作为图像。Generate QR works，但是--我想把它作为图像共享 (whatsapp，蓝牙等等)。
import QRCode from 'react-native-qrcode-svg';
let svg = useRef();
//let svg = '';
<QRCode
size={300}
value={`${name}`}
getRef={(c) => (svg = c)}
/>
我尝试了官方文档中的"get base
浏览 7提问于2022-05-24得票数 0
回答已采纳
我们正在考虑在我们的应用中使用react-native-svg。我们有点想在应用程序中自由地使用它来创建几乎每个页面的视觉效果，因为它应该比使用图像更好地缩放。我们的目标是安卓和iOS，平板电脑和手机。
在react-native-svg应用程序中大量使用SVG而不是使用PNG图片有意义吗？
浏览 20提问于2020-02-05得票数 0
1回答
我有一个令人困惑的.svg文件，其中的向量是用笔画和填充创建的。我想要自定义本地.svg文件的颜色。例如，如果我写 <TestIconFlexible width='100%' height='100%' fill='red' /> 我的React Native会将真正的矢量颜色更改为红色。 我的测试.svg文件是这样的 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="h
浏览 40提问于2021-04-30得票数 0
回答已采纳
我收到来自API的base64编码的SVG，有什么方法可以在react应用程序中渲染解码的SVG吗？
import React from 'react';
import { useSelector } from 'react-redux';
const userLogo = () => {
const logoSVG = useSelector((store) => store.portfolio.logo))
const [logo, setLogo] = React.useState('');
React.useE
浏览 2提问于2021-03-15得票数 0
我正在尝试将一个react-native-svg元素放在View中，这样它就会以一定的、固定的纵横比呈现出来，然后在包含视图的范围内缩放到尽可能大。
Svg元素(来自react-native-svg)似乎只接受绝对的width和height属性(我尝试过使用百分比，但没有任何呈现，并且调试确认百分比值在到达本机视图时为NSNull )。我不确定如何才能达到预期的效果。这是我到目前为止尝试过的：
// I have a component defined like this:
export default class MySvgCircle extends React.Component {
浏览 0提问于2018-02-04得票数 33
我使用' react-native -qrcode- svg‘生成了二维码，我想通过电子邮件或类似的方式使用react-native的share模块来分享这个svg。
import { Share } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
render() {
return (
....
<QRCode
color="#090909"
浏览 1提问于2018-07-10得票数 7
react-native link是做什么的？
医生说要做
react-native link react-native-svg
是不是和
pod 'RNSVG', :path => '../node_modules/react-native-svg'
# pod install
浏览 8提问于2017-07-25得票数 6
回答已采纳
我只想在我的reactjs应用程序中渲染三个svg图像。我看过几十篇文章和帖子，但我想知道在Reactjs (2019)中渲染svg的最佳/正确方法是什么？
最初我使用的是"object type=“图像/svg+xml”data{ ... }……我知道这不是渲染svg的正确方法。
然后我了解到"xlink:href“=> "xlinkHref in Reactjs”是渲染svg的最佳实践，但这在我的React应用程序中不起作用。
请告诉我xlinkHref是否是在Reactjs (2019)中渲染svg的正确方式？如果没有的话，能帮我指一下方向吗？
编辑:使用解
浏览 0提问于2019-03-07得票数 4
2回答
我正在尝试在我的项目中使用UI Kitten，但不知道如何在世博会上安装UI Kitten。
expo install @ui-kitten/eva-icons @eva-design/eva @ui-kitten/components react-native-svg
错误：
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react-native-svg@12.1.0
浏览 38提问于2021-05-21得票数 0
1回答
我已经在我的项目中尝试了react-native-svg为SplashScreen页面加载svg图像。但Logo Image在文本之后显示速度较慢。文本本身和徽标是同一个svg文件 The Text Then the Image 这是我的代码 import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import {Logo} from '../../assets';
export default class Splash ex
浏览 22提问于2021-11-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
