问题标签 [react-native-svg]

当我导入 SVG 并将其作为道具传递给另一个组件时，console.log 传递的 SVG 道具我得到数字。由于这个原因，我遇到了问题，因为这react-native-svg-uri需要我将 SVG 作为其svgXmlData属性的字符串导入。

父组件

子组件

但是我也注意到，当我将图标导入到与 SvgUri 相同的位置时，它会正确呈现，并且 console.log 会将正确的 svg 组件呈现为字符串。

有时这可行，但我不知道为什么

尝试使用 svg ClipPath 剪辑 Image 组件被证明是有问题的。我可以剪辑 Rect 没问题，但是当我用图像替换 Rect 时，什么也没有出现。

被注释掉的 Rect 按预期工作并创建一个红色八角形。图像返回空白。

我觉得我忽略了一些简单的事情。任何帮助表示赞赏。

我正在使用d3-shape库在React Native. 这是我的代码：

切片.js

这个类返回饼图的每一片。我想像这样向弧添加文本：

我搜索了很多，每个人都是这样回答的：

但这不起作用React Native它说：

append 不是一个函数。

有关更多信息，这是我的App.js

如果您知道React Native的解决方案，请帮助我。

我试图让滚动视图中的文本或任何其他子视图出现在透明的 SVG 形状后面，react-native 中的以下 SVG 形状代码：

我试图让 SVG 形状出现的组件：

这就是我得到的结果：

现在我的目标是让子视图或文本出现在波形路径的后面，而不是包含 SVG 路径的视图框。

环境信息

反应本机信息输出：

库版本：1.2.3

重现步骤

1. 使用 react-native-cli 创建一个新项目。
2. 将 SVG 文件引入src项目文件夹（我下载并使用了 react-native-svg-uri 文档中提到的 homer simpson 图像进行测试）。
3. 将 svg 导入为import MySVG from './mysvg.svg';
4. 传入组件MySVG的svgXmlData属性SvgUri

预期行为

图像应呈现在屏幕上

可重现的示例代码

错误信息

我使用react-native-svg将 SVG 图像插入到我的 React Native 应用程序中。我目前正在用 svgs 替换我的 png，因为我的大部分资产都很模糊。我遇到了一个需要用ImageBackgroundSVG 文件替换使用 png 的用例。有没有办法做到这一点？我尝试将图像用作包含所有元素的主要组件，但图像出现在所有内容之上。

使用react-native-svg. 我经历了许多像这样的git hub和stack over flow 讨论，但无法找出确切的根本原因。

就我而言，我正在以格式下载平面图标svg，然后使用包本身建议的此在线转换器svg将其转换为格式。react-nativereact-native-svg

“react-native”：“0.60.5”，“react-native-svg”：“9.4.0”

有人可以告诉我这个错误的根本原因以及如何解决它吗？

这个很简单，但我有点迷路了。

如何使文本位于圆圈的中间（垂直和水平）？或中间的所有内容Svg（然后文本将在圆圈的中间）

我有由多个多边形组装而成的 SVG。我试图将图像/按钮放在多边形中心内，但我尝试过的总是将图像放在x=0 and y=0屏幕上。

有了这个，我得到：

但如果我把<Circle x="110" y="0"我得到

这是正确的，但我不想使用 x=110 我试图让这个圆相对于它的父多边形。所以我可以将 circle 设置为 x=0 y=0 并将其保持在父多边形的区域内。

我一直在使用 react-native-svg 和 react-native-svg-transformer 在我的应用程序中渲染 svg 文件，它运行良好。但是，它不适用于一个特定的 svg 文件。文件大小仅为 281 kb 左右，而其他工作文件大小约为 1.61 mb。文件应该看起来像这样， 它有所有的颜色

但是，它看起来像这样， 它只显示黑色

请帮助我，谢谢！

*metro.config.js 代码

Metro.config.js 代码截图

*app.js 代码 app.js 代码 截图

*有效的svg文件有效的 svg文件的截图

*无效 的svg文件无效的svg文件截图