React Native 0.72.0后react-native-svg-transformer正确配置咨询

在 React Native 0.72+ 版本中，Metro 配置方式发生了变化：原异步获取默认配置的写法被同步的 getDefaultConfig(__dirname) 替代，且需要通过 mergeConfig 合并自定义配置。你之前的错误是使用了未定义的 defaultAssetExts、defaultSourceExts 变量，正确的配置方式如下：

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

// 获取 Metro 默认配置
const defaultConfig = getDefaultConfig(__dirname);
// 从默认配置中解构出需要修改的扩展名列表
const { assetExts, sourceExts } = defaultConfig.resolver;

const customConfig = {
  transformer: {
    // 指定处理 SVG 的 transformer
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    // 从资源扩展名中移除 SVG（避免被当作普通资源处理）
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    // 将 SVG 添加到源码扩展名中（让指定的 transformer 处理）
    sourceExts: [...sourceExts, 'svg'],
  },
};

// 合并默认配置与自定义配置
module.exports = mergeConfig(defaultConfig, customConfig);

关键说明 #

1. 获取默认配置：必须传入 __dirname 参数，这是 React Native 0.72+ 版本对 getDefaultConfig 的要求。
2. 基于默认值修改：从默认配置中解构出 assetExts 和 sourceExts，确保修改是在官方默认配置的基础上进行，不会丢失其他默认规则。
3. 合并配置：使用 mergeConfig 而非直接覆盖配置，避免破坏 Metro 默认的其他核心配置项。

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