React Native集成react-native-svg-transformer报react is not defined错误

1. 修正依赖版本兼容性 #

你当前使用的 react-native-svg-transformer@0.14.3 最低支持 React Native 0.64.0 版本，和你项目的 0.63.4 版本不兼容，需要降级到匹配的版本：

# 卸载现有版本
npm uninstall react-native-svg-transformer
# 安装适配RN0.63的版本
npm install react-native-svg-transformer@0.12.0 --save-dev

你当前的 react-native-svg@12.2.0 版本和RN0.63.4兼容，无需调整。

2. 验证metro.config.js配置 #

确认你的配置文件写法适配RN0.63版本，参考以下配置调整：

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

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: defaultConfig.resolver.assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
    },
  };
})();

3. 清除缓存重启编译服务 #

所有配置和依赖修改后必须彻底清除缓存再启动，否则旧编译缓存会持续触发报错：

# 停止现有metro服务后执行，清除缓存启动metro
npx react-native start --reset-cache
# 新开终端重新运行应用
npx react-native run-android
# iOS端执行 npx react-native run-ios

4. 额外排查项 #

• 验证你导入的svg文件无损坏、无内嵌脚本或特殊自定义属性，可先用极简测试svg验证配置是否生效
• 确认项目根目录无其他优先级更高的metro配置文件覆盖当前配置
• 配置生效后，导入的svg可直接作为组件使用，示例：

import Firefox from '../../images/general/firefox.svg';
// 组件内使用
<Firefox width={120} height={40} />

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