如何在 React Native 中正确渲染 SVG答案

【问题标题】：How to properly render SVG in React Native如何在 React Native 中正确渲染 SVG
【发布时间】：2021-10-01 19:28:09
【问题描述】：

嗨，在我们的 react native 应用程序中有以下代码：

import { SvgCssUri } from 'react-native-svg';

<SvgCssUri style={styles.osIcon} uri={'https://mon.zappiehost.com/images/os/' + props.data.icon} />

我什至尝试过使用简单的SvgUri（而不是SvgCssUri）

但图像仍然加载没有一些内容（黑色）：

【问题讨论】：

@RobertLongson 我添加了一个指向似乎渲染不正确的原始 SVG 图像的链接raw.githubusercontent.com/librenms/librenms/master/html/images/…
不显示的路径没有填充属性。它应该默认为黑色，但也许有一个错误，但它没有。你可以尝试给补丁一个明确的黑色填充或#000000

【解决方案1】：

事实证明，由于 React Native SVG 没有自动填充，所以缺少黑色。

将fill={'black'} 添加到<SvgUri> 标记中

【讨论】：