React Native SVG 导入指南：react-native-svg + SvgXml

SVG（Scalable Vector Graphics）在 React Native 开发中已成为不可或缺的图形资源格式。与传统位图（PNG、JPG）相比，SVG 提供了无损缩放、更小的文件体积以及更灵活的样式控制能力。本文将详细介绍在 React Native 项目中导入和使用 SVG 文件的两种主流方法，并提供完整的代码示例和性能优化建议。

为什么在 React Native 中使用 SVG

SVG（可伸缩矢量图形）为移动应用开发带来几个关键优势：

完美缩放：无论屏幕尺寸或分辨率如何，图形始终保持清晰
文件体积小：相比多套 PNG 资源，SVG 文件通常更轻量
动态样式：可通过 props 动态修改颜色、尺寸等属性
一致性：在 iOS 和 Android 上呈现相同的视觉效果

核心依赖：react-native-svg

使用 SVG 图像在 React Native 中的第一步是安装 react-native-svg 库，这个包允许我们在 React Native 应用中原生渲染 SVG 文件。

npm install react-native-svg
# 或者
yarn add react-native-svg

注意：对于 React Native 0.60 及以上版本，链接通常是自动的。对于更早的版本，可能需要手动链接原生模块。

方法一：使用 react-native-svg-transformer

这是最推荐的方法，它允许你像在 Web React 项目中一样直接导入 SVG 文件作为组件使用。

安装和配置

首先安装 transformer：

npm install --save-dev react-native-svg-transformer
# 或者
yarn add --dev react-native-svg-transformer

然后在项目根目录创建或修改 metro.config.js：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"],
    },
  };
})();

使用示例

配置完成后，可以直接导入 SVG 文件：

import React from "react";
import { View } from "react-native";
import Logo from "./assets/logo.svg";

const MyComponent = () => (
  <View>
    <Logo width={100} height={100} fill="#3B82F6" />
  </View>
);

export default MyComponent;

这种方法允许你将 SVG 文件视为常规 React Native 组件，使它们易于在整个应用中导入和使用。

优点：

类型安全且开发体验好
支持 props 动态控制样式
性能优秀，编译时转换

适用场景：静态图标库、设计系统中的固定资源

方法二：使用 SvgXml 动态加载

SvgXml 组件来自 react-native-svg，允许你从 XML 字符串渲染 SVG，为动态场景提供了更多灵活性。

基础用法

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

const svgMarkup = `
  <svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="#10B981" />
  </svg>
`;

const DynamicIcon = () => <SvgXml xml={svgMarkup} width="100%" height="100%" />;

export default DynamicIcon;

从文件动态加载

当需要从文件系统或网络加载 SVG 时，SvgXml 特别有用：

import React, { useState, useEffect } from "react";
import { SvgXml } from "react-native-svg";
import RNFS from "react-native-fs";

const LoadableSvg = ({ filePath }) => {
  const [xml, setXml] = useState("");

  useEffect(() => {
    async function loadSvg() {
      try {
        const svgContent = await RNFS.readFile(filePath);
        setXml(svgContent);
      } catch (error) {
        console.error("Error loading SVG file", error);
      }
    }
    loadSvg();
  }, [filePath]);

  return xml ? <SvgXml xml={xml} width="100%" height="100%" /> : null;
};

优点：

支持运行时动态加载
可从 API 或远程服务器获取 SVG
灵活处理用户生成的内容

注意事项：在重复渲染复杂或动态 SVG 时可能存在性能问题，因为它在运行时解析 XML。

SVG 文件存储和组织

在 React Native 项目中，你通常将 SVG 文件存储在项目结构中的 assets 文件夹中，然后可以像其他资源一样导入它们。

推荐的目录结构：

src/
  assets/
    icons/
      arrow-left.svg
      arrow-right.svg
    logos/
      brand-primary.svg
      brand-secondary.svg
  components/
    icon.tsx

在 SVG Viewer 中预览和验证

在将 SVG 集成到 React Native 项目之前，建议先在 SVG Viewer 中预览和验证：

检查 viewBox：确保 viewBox 设置正确，避免裁剪或缩放问题
清理冗余代码：移除设计工具添加的元数据和编辑器属性
验证路径：确认路径数据完整且优化
测试缩放：在不同尺寸下预览，确保视觉效果符合预期

使用 SVG Viewer 可以在开发阶段提前发现问题，避免在移动设备上调试时浪费时间。

优化 SVG 以提升性能

在 React Native 中使用 SVG 时，文件优化尤为重要：

简化路径：使用 SVG 优化器或 SVGO 等工具减少路径点数
移除未使用的元素：删除隐藏图层和空组
合并重复样式：将重复的属性提取为共享样式
控制精度：路径坐标保持 2-3 位小数即可

经过优化的 SVG 不仅加载更快，渲染性能也更好，特别是在列表滚动等高频场景中。

实战建议

基于实际项目经验，这里有几个实用建议：

统一命名规范：为 SVG 文件建立清晰的命名约定，如 icon-home.svg、logo-brand.svg
封装通用组件：创建一个 Icon 组件统一管理所有图标的导入和使用
类型定义：为 SVG 组件添加 TypeScript 类型定义，提升开发体验
懒加载策略：对于大量图标，考虑按需加载而非全部打包

总结

在 React Native 中使用 SVG 有多种方式，选择合适的方法取决于具体场景：

静态图标库：使用 react-native-svg-transformer，获得最佳开发体验
动态内容：使用 SvgXml，支持运行时加载和处理
性能关键场景：提前优化 SVG 文件，控制复杂度

无论选择哪种方法，都建议在 SVG Viewer 中预先验证文件质量，确保在移动设备上呈现出理想的视觉效果。通过合理的工作流程和工具支持，SVG 将成为 React Native 应用中不可或缺的图形资源。

下一步

用 SVG Viewer 先确认 viewBox、对齐和缩放表现。
用 SVG 优化器减少复杂路径，提升移动端渲染稳定性。
需要组件代码时，直接使用 SVG 转 React Native。

React Native SVG 导入指南：react-native-svg + SvgXml