React Native SVG无法解析问题求助：已装依赖仍报错

我在React Native项目中引入SVG文件时遇到「Unable to resolve svg」错误，引入代码如下：

import CheckboxUnchecked from '../assets/checkbox-unchecked.svg'

已安装react-native-svg和react-native-svg-transformer依赖，且配置了metro.config.js（配置代码如下），但错误仍存在：

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

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

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

  return config;
})();

以下是几个排查和解决方向：

• 重启Metro服务：修改metro配置后必须彻底关闭当前Metro进程，再重新启动，否则新配置不会生效。
• 校验SVG路径与文件：确认../assets/checkbox-unchecked.svg的路径是否正确，注意文件名大小写（部分系统严格区分），同时检查文件是否确实存在于对应目录中。
• 匹配依赖版本：确保react-native-svg和react-native-svg-transformer的版本与你的React Native/Expo版本兼容。比如Expo SDK 49+建议搭配react-native-svg^{13.10.0、`react-native-svg-transformer`}1.1.0，版本不匹配会导致解析逻辑冲突。
• 清除项目缓存：执行命令彻底清除缓存后重启服务：

  # Expo项目
  npx expo start --clear
  # 纯React Native项目
  npx react-native start --reset-cache
  

• 检查Babel配置（非Expo项目）：如果是非Expo的React Native项目，需要在babel.config.js中添加SVG插件：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['react-native-svg/plugin'],
  };
  

• 确认Metro配置位置：metro.config.js必须放在项目根目录（与package.json同级），否则Metro无法读取到配置。

内容的提问来源于stack exchange，提问作者김일태