React Native创建Image组件时require(source)调用无效问题排查

问题根源 #

你写的source={require(source)}的核心问题是：React Native的require()不支持动态拼接的路径变量。

Metro（React Native默认打包工具）在编译阶段就需要确定所有要打包的资源路径，动态拼接的字符串（比如你用'../../assets/' + props.name生成的source变量）在编译时无法被解析，打包工具不知道你实际要引用哪个文件，因此会抛出错误。

解决方案 #

方案1：静态映射表（推荐） #

提前把需要用到的图片资源用对象映射起来，通过传入的name字段匹配对应的静态require路径：

import React from 'react';
import {Image} from 'react-native';

// 定义允许的图片名称类型，避免传错值
type ImageName = 'images/splash.png';

interface Props {
  width?: number;
  name: ImageName;
}

// 静态映射所有需要的图片资源
const ImageAssets = {
  'images/splash.png': require('../../assets/images/splash.png'),
  // 后续新增图片直接在这里添加即可
};

export const ImageView = (props: Props) => {
  return <Image width={props.width} source={ImageAssets[props.name]} />;
};

调用方式不变：

<ImageView name={'images/splash.png'} />

方案2：使用URI方式（适合大量图片场景） #

如果你的图片数量极多，不想逐个维护映射表，可以配置Metro打包规则后，直接用uri引用：

1. 首先修改项目根目录的metro.config.js，确保图片资源被正确识别：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    assetExts: ['png', 'jpg', 'jpeg', 'gif'], // 添加你需要的图片格式
  },
});

2. 修改ImageView组件：

import React from 'react';
import {Image} from 'react-native';

interface Props {
  width?: number;
  name: string;
}

export const ImageView = (props: Props) => {
  // 直接用uri引用assets目录下的图片
  return <Image width={props.width} source={{ uri: `assets/${props.name}` }} />;
};

注意：这种方式需要确保图片文件的路径和名称完全匹配，且在iOS/Android平台的打包配置正确，否则可能出现图片不显示的问题。

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