如何在React Native上更改SVG的颜色？

Question

标题说明了问题，我的视图上有一个SVG文件：

<SvgUri source={require("./assets/icons/eva-icons/arrow-back.svg")} width="50" height="50"/>

如何更改正在加载的svg的颜色？ fill属性不会更改任何内容。

Answer 1

好的，因此SvgUri似乎不完全支持eva图标。这是由不同的svg / xml结构引起的，因此我在Affinity Designer中打开了图标（您可以选择任何SVG编辑器），然后修改了向后箭头图标（交换了颜色）并再次导出了它。现在正在工作。您可以只传递任何颜色作为填充选项：

这是arrow-back.svg的修改版本：

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 16 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M15,6.001l-11.86,0l3.63,-4.36c0.149,-0.18 0.231,-0.406 0.231,-0.64c0,-0.549 -0.452,-1.001 -1.001,-1.001c-0.297,0 -0.58,0.133 -0.77,0.361l-5,6c-0.034,0.048 -0.064,0.098 -0.09,0.15c0,0.05 0,0.08 -0.07,0.13c-0.045,0.115 -0.069,0.237 -0.07,0.36c0.001,0.124 0.025,0.246 0.07,0.36c0,0.05 0,0.08 0.07,0.13c0.026,0.052 0.056,0.103 0.09,0.15l5,6c0.19,0.229 0.473,0.361 0.77,0.36c0.234,0.001 0.46,-0.081 0.64,-0.23c0.229,-0.19 0.362,-0.472 0.362,-0.77c0,-0.233 -0.082,-0.46 -0.232,-0.64l-3.63,-4.36l11.86,0c0.549,0 1,-0.451 1,-1c0,-0.548 -0.451,-1 -1,-1Z" style="fill:#f00;fill-rule:nonzero;"/></svg>

以下是输出：