React Native 中如何将 SVG XML 设置为背景并解决解析报错问题

问题原因 #

• 你的SVG字符串存在语法错误：polygon标签前多了不必要的换行和<单独拆分，导致解析器无法识别标签结构
• SVG属性命名不符合react-native-svg要求：Web端的fill-rule属于中划线命名规范，在RN组件中需要转换为驼峰命名fillRule

修复后的代码 #

import React from "react";
import { SvgXml } from "react-native-svg";
import { View } from "react-native";

// 已修复语法错误、替换属性为驼峰命名
const xml = `
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
  <g
    fill='#ffb6c1'
    fill-opacity='0.2'
  >
    <polygon
      fillRule='evenodd'
      points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'
    />
  </g>
</svg>
`;

// 背景SVG组件，默认铺满父容器
const PatternBackground = () => {
  return (
    <View style={{
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      backgroundColor: "#000000"
    }}>
      <SvgXml xml={xml} width="100%" height="100%" />
    </View>
  )
}

export default PatternBackground;

使用方法 #

如果要作为页面背景，直接把这个组件放在页面根容器的最前面即可：

// 页面使用示例
import PatternBackground from './PatternBackground'

const YourPage = () => {
  return (
    <View style={{flex: 1}}>
      {/* 背景放在最底层 */}
      <PatternBackground />
      {/* 其他页面内容放在上层 */}
      <View style={{padding: 20}}>
        {/* 你的页面内容 */}
      </View>
    </View>
  )
}

更简单的替代方案 #

如果不想手动调整SVG语法，也可以直接用原来的data URI搭配ImageBackground组件实现，不用引入react-native-svg：

import { ImageBackground } from 'react-native'

const PatternBackground = () => {
  return (
    <ImageBackground
      source={{ uri: 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'%3E%3Cg fill=\'%23ffb6c1\' fill-opacity=\'0.16\'%3E%3Cpolygon fill-rule=\'evenodd\' points=\'8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4\'/%3E%3C/g%3E%3C/svg%3E' }}
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        backgroundColor: "#000"
      }}
      resizeMode="repeat"
    />
  )
}

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