如何在React Native中正确渲染SVG？两款第三方库尝试均失败

我之前也踩过类似的坑，你用的这两个库要么维护状态不佳，要么适配性有限，现在社区最稳定的方案是用 react-native-svg 配合 react-native-svg-transformer，能直接把SVG文件转换成React组件渲染，亲测有效，步骤如下：

1. 安装必要依赖 #

首先安装核心库和转换器：

# 安装react-native-svg（核心渲染库）
npm install react-native-svg
# 安装SVG转换器（让Metro能识别并转换SVG文件）
npm install --save-dev react-native-svg-transformer

如果你的React Native版本低于0.60，需要手动执行react-native link react-native-svg完成链接；0.60+版本会自动处理链接。

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'],
  },
});

3. 修改SVG导入与渲染方式 #

现在你可以直接把SVG文件当作React组件导入，不再需要用require当作资源加载：

import React from 'react';
import EmailLogo from '../static/others/Email.svg'; // 直接导入SVG组件
import Button from './你的Button组件路径'; // 替换成实际组件路径

const YourComponent = () => {
  return (
    <ButtonContainer>
      <Button 
        bgColor={colors.darkTeal} 
        txtColor={colors.whiteText} 
        onPress={this.onSignInPress.bind(this)}
      >
        LOG IN WITH
      </Button>
      {/* 直接使用SVG组件，设置宽高样式即可 */}
      <EmailLogo style={{ width: 80, height: 80 }} />
    </ButtonContainer>
  );
};

export default YourComponent;

4. 常见问题排查 #

• 如果还是只显示空白/白色方块，检查SVG文件本身：比如里面的fill属性是不是设成了和背景色一致的白色，可以手动在组件上覆盖颜色：<EmailLogo fill="#000" style={{ width: 80, height: 80 }} />
• 确保react-native-svg版本和你的React Native版本兼容（比如RN 0.70+建议用13.x以上版本）
• 清理Metro缓存：执行npx react-native start --reset-cache，避免缓存导致配置不生效

为什么你之前的方案失效？ #

react-native-svg-image这类库大多已经停止维护，它们本质上是把SVG当作普通图片资源加载，没有正确解析SVG的结构，很容易出现显示异常；而react-native-svg是直接解析SVG的XML结构转换成React Native原生组件，稳定性和可控性都强很多。

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