React Native如何动态导入SVG？API返回品牌名后展示对应Logo

调用API获取摩托车品牌名称后，需要展示对应的品牌Logo。这些Logo是已通过react-native-svg转换为JSX格式的SVG文件，尝试了以下动态导入组件的代码但未生效：

const [BrandLogo, setBrandLogo] = useState(null);

useEffect(() => {
  const loadComponent = async () => {
    try {
      const module = await import(`../../assets/svg/brand-logos/${brand}`);
      setBrandLogo(() => module.default);
    } catch (err) {
      console.error(`Failed to load component: ${brand}`, err);
    }
  };

  loadComponent();
}, [brand]);

1. 验证路径与文件名一致性 #

• 确认brand变量的值与目标SVG组件的文件名完全匹配，包括大小写、文件后缀（比如文件是Kawasaki.jsx，则brand需为Kawasaki.jsx；若项目配置支持省略后缀，可只传Kawasaki）。
• 检查相对路径../../assets/svg/brand-logos/的正确性，确保目标文件确实存在于该目录下。

2. 配置React Native支持动态导入与JSX组件 #

React Native默认打包配置可能限制动态导入，需调整以下配置：

• 修改metro.config.js，确保JSX格式的文件被正确识别：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), {
    resolver: {
      sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'jsx'],
    },
  });
  

• 若使用Babel，安装babel-plugin-dynamic-import-node并在.babelrc中配置：

  {
    "plugins": ["dynamic-import-node"]
  }
  

3. 正确渲染动态加载的组件 #

加载完成后，需确保组件存在再渲染，且组件名必须遵循React大写命名规范：

return (
  <View>
    {BrandLogo && <BrandLogo width={80} height={80} />}
  </View>
);

4. 清除缓存并重新构建 #

动态导入失败可能是缓存导致，执行以下命令重置缓存后重启项目：

npx react-native start --reset-cache
npx react-native run-android # 或 run-ios

5. 替代方案：使用组件映射表 #

若动态导入始终存在问题，可提前导入所有品牌Logo组件，通过映射表匹配品牌名，这种方式更稳定：

// 提前导入所有品牌Logo组件
import YamahaLogo from '../../assets/svg/brand-logos/Yamaha';
import HondaLogo from '../../assets/svg/brand-logos/Honda';
import SuzukiLogo from '../../assets/svg/brand-logos/Suzuki';

// 创建品牌-组件映射表
const brandLogoMap = {
  Yamaha: YamahaLogo,
  Honda: HondaLogo,
  Suzuki: SuzukiLogo,
  // 补充其他品牌映射
};

// 使用时直接获取组件
const BrandLogo = brandLogoMap[brand];

// 渲染
return (
  <View>
    {BrandLogo && <BrandLogo width={80} height={80} />}
  </View>
);

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