如何在React Native中正确渲染SVG 解决react-native-svg加载丢失黑色内容问题

问题根因 #

该渲染异常由react-native-svg提供的SvgUri/SvgCssUri组件对SVG内部内嵌CSS类选择器样式的支持不完善导致。本次使用的proxmox原始SVG将黑色区域的样式定义在<style>标签的类规则中，组件解析时未正确应用该部分样式，因此出现黑色内容丢失的情况。

可行解决方案 #

• 方案1：预处理SVG资源，把内联CSS样式全部转换为标签的行内style属性
  你可以用工具批量处理所有用到的SVG图标，把<style>里的类规则直接写入对应DOM节点的style属性上，处理后的SVG用现有组件就可以正常渲染。常用的转换方案可以用svgo加自定义插件，或者用本地脚本批量转换。
• 方案2：改用支持完整CSS解析的SVG渲染方案
  替换react-native-svg的内置Uri组件，针对远程SVG可以直接用轻量的WebView组件加载，完整支持所有SVG标准特性，代码示例：

  import { WebView } from 'react-native-webview';
  
  <WebView
    style={styles.osIcon}
    source={{ uri: 'https://mon.zappiehost.com/images/os/' + props.data.icon }}
    scalesPageToFit={true}
    scrollEnabled={false}
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
  />
  

• 方案3：手动请求SVG文本内容后渲染
  如果不想更换组件，可以先请求SVG的完整文本内容，传入SvgCss组件渲染，该组件对内嵌样式的支持度远高于Uri后缀的组件，代码示例：

  import { SvgCss } from 'react-native-svg';
  import axios from 'axios';
  
  // 组件内逻辑
  const [svgContent, setSvgContent] = useState('');
  useEffect(() => {
    const fetchSvg = async () => {
      const res = await axios.get('https://mon.zappiehost.com/images/os/' + props.data.icon);
      setSvgContent(res.data);
    }
    fetchSvg();
  }, [props.data.icon]);
  
  return <SvgCss style={styles.osIcon} xml={svgContent} />
  

内容的提问来源于stack exchange，提问作者Yif Swery