React Native动态导入本地SVG时出现'Invalid call'错误求助

错误原因 #

1. Metro打包器限制：React Native的Metro打包器不支持完全动态的import()路径，它需要在编译阶段明确知道要打包的资源路径。你用import(url)这种完全由变量决定的导入方式，Metro无法提前解析对应的SVG文件，因此抛出Invalid call at line 13: import(url)错误。
2. 组件重复初始化问题：你把lazy的定义放在了组件内部，每次DynamicSvg渲染时都会重新创建LazySvg组件，这会导致不必要的重复加载，甚至触发额外错误。

解决方案 #

方案一：预定义SVG映射表（最稳定可靠） #

提前导入所有可能用到的SVG文件，通过映射表根据name匹配对应的组件，这种方式完全兼容Metro的打包规则：

import { View } from 'react-native';
// 提前导入所有需要的SVG组件
import SvgAlice from './../assets/people/alice.svg';
import SvgBob from './../assets/people/bob.svg';
import SvgCharlie from './../assets/people/charlie.svg';

// 创建文件名到组件的映射
const svgComponentMap = {
  'alice.svg': SvgAlice,
  'bob.svg': SvgBob,
  'charlie.svg': SvgCharlie,
  // 按需添加更多SVG
};

export const DynamicSvg = ({ name }: { name: string }) => {
  // 根据name获取对应的SVG组件
  const TargetSvg = svgComponentMap[name];

  // 如果没有匹配到，返回占位或默认组件
  if (!TargetSvg) {
    return <View />;
  }

  return <TargetSvg />;
};

方案二：使用半动态导入（适合文件名有规律的场景） #

如果你的SVG文件名有固定格式，可以使用部分静态的模板字符串来写导入路径，Metro能解析这种形式的动态导入：

import { Suspense, lazy } from 'react';
import { View } from 'react-native';

// 把lazy逻辑抽离到组件外部，避免重复初始化
const getLazySvgComponent = (svgName: string) => lazy(() => 
  // 路径保留部分静态内容，仅变量替换文件名部分
  import(`./../assets/people/${svgName}.svg`)
);

export const DynamicSvg = ({ name }: { name: string }) => {
  const LazySvg = getLazySvgComponent(name);

  return (
    // 必须给Suspense添加fallback，否则会报错
    <Suspense fallback={<View />}>
      <LazySvg />
    </Suspense>
  );
};

注意：这种方式要求Metro能枚举到所有可能的name值，否则对应的SVG可能不会被打包进应用。同时要确保你已经配置了react-native-svg-transformer，让Metro能正确处理SVG文件。

额外注意事项 #

• 确保已安装react-native-svg和react-native-svg-transformer，并在metro.config.js中配置好SVG的解析规则。
• 不要在组件渲染周期内重复创建lazy组件，尽量把lazy的定义放在组件外部。

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