React Native中Image组件source动态传参报错问题排查

错误原因 #

React Native的资源打包机制要求require()必须传入静态字符串路径，不能是动态变量（比如你传入的path参数）。打包工具会在构建阶段提前扫描所有明确的require('xxx.png')语句，将对应的图片资源打包进应用；如果用动态变量，工具无法预知需要打包哪些图片，因此抛出Invalid call at line 7: require(path)错误。

可行解决方案 #

方案1：提前定义图片映射表 #

在Icon.js中维护一个包含所有需用到图片的映射对象，通过传入key来获取对应的资源：

// Icon.js
import React from 'react';
import { Image } from 'react-native';

// 提前定义所有本地图片的require映射
const ImageMap = {
  home: require('../assets/home.png'),
  profile: require('../assets/profile.png'),
  settings: require('../assets/settings.png'),
  // 按需添加更多图片
};

const Icon = ({ name }) => {
  return <Image source={ImageMap[name]} />;
};

export default Icon;

调用组件时传入对应key：

// TabNavigator中调用
<Icon name="home" />

方案2：直接传入已require的资源 #

修改Icon.js接收已处理好的source属性，调用时直接传入require()结果：

// Icon.js
import React from 'react';
import { Image } from 'react-native';

const Icon = ({ source }) => {
  return <Image source={source} />;
};

export default Icon;

调用组件时直接传入静态require：

// TabNavigator中调用
<Icon source={require('../assets/home.png')} />

注意事项 #

• 禁止使用模板字符串拼接动态路径（如require(../assets/${path}.png)），这种写法同样属于动态路径，会触发相同错误。
• 远程图片不受此限制，直接用{ uri: 远程图片地址 }作为source即可。

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