在React Native应用中插入SVG矢量图的最优方案及实现方法

你说得对，React Native确实没有原生支持SVG的能力，不过社区早就有成熟的解决方案了，我给你梳理一下目前最靠谱的实现方式，刚好能解决你这两个问题：

最佳实现方案：react-native-svg + react-native-svg-transformer组合 #

这个组合是目前社区最推荐的方案，它既支持直接导入本地.svg文件当作React组件使用，也允许你通过react-native-svg提供的API手动编写/修改SVG图形，灵活性和实用性都拉满。

步骤1：安装依赖 #

首先需要安装核心渲染库和对应的文件转换器：

# 安装react-native-svg（核心SVG渲染库）
npm install react-native-svg
# 或者使用yarn
yarn add react-native-svg

# 安装react-native-svg-transformer（让Metro能识别并处理.svg文件）
npm install --save-dev react-native-svg-transformer
# 或者yarn
yarn add --dev react-native-svg-transformer

步骤2：配置Metro打包器（关键步骤） #

修改项目根目录下的metro.config.js，让Metro知道如何处理.svg文件，而不是把它当作普通静态资源：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    // 排除svg作为静态资源，让它被当作源码处理
    assetExts: getDefaultConfig(__dirname).resolver.assetExts.filter(ext => ext !== 'svg'),
    // 添加svg到源码扩展名列表
    sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'svg'],
  },
});

两种常用的SVG使用方式 #

方式一：直接插入本地.svg格式文件

把你的.svg文件放在项目的资源目录（比如assets/svg/），然后直接导入当作组件使用，还能通过props修改它的样式：

import React from 'react';
import { View } from 'react-native';
// 导入本地SVG文件
import AppLogo from './assets/svg/app-logo.svg';

const HomeScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* 像普通组件一样设置宽高、填充色等属性 */}
      <AppLogo width={250} height={250} fill="#2ecc71" />
    </View>
  );
};

export default HomeScreen;

方式二：手动编写SVG图形

如果需要动态生成SVG内容（比如根据数据变化调整图形），可以用react-native-svg提供的基础组件来构建：

import React from 'react';
import { View } from 'react-native';
import { Svg, Circle, Path } from 'react-native-svg';

const CustomIcon = () => {
  return (
    <View>
      <Svg width="60" height="60" viewBox="0 0 24 24">
        <Circle cx="12" cy="12" r="10" stroke="#3498db" strokeWidth="2" fill="white" />
        <Path d="M12 6v6l4 3" stroke="#3498db" strokeWidth="2" fill="none" />
      </Svg>
    </View>
  );
};

export default CustomIcon;

额外小贴士 #

• 如果你用的是Expo项目，不需要手动配置Metro，直接执行expo install react-native-svg即可，Expo已经内置了相关支持。
• 复杂的SVG文件可能存在一些React Native不兼容的属性，建议用SVGO工具先优化一下SVG代码，去除冗余内容。

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