Webpack+React Native资源处理：解决Image组件source参数错误

问题根源 #

Metro处理本地图片资源时，会将导入的图片转换为数字资源ID，而Webpack默认的asset/resource会返回资源路径字符串。React Native的Image组件source属性仅接受number（本地资源ID）或{ uri: string }格式，直接传入字符串就会触发prop类型错误。

实现Webpack与Metro资源处理对齐的方案 #

方案1：自定义Webpack Loader返回资源ID格式 #

编写简单的自定义loader，让Webpack处理图片时返回类似Metro的数字ID（开发环境模拟，生产环境适配打包路径）：

1. 在项目根目录创建rn-asset-loader.js：

module.exports = function(content) {
  const filename = this.resourcePath.split('/').pop();
  // 基于文件名生成唯一数字作为模拟资源ID
  const hash = filename.split('.')[0].split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  
  if (process.env.NODE_ENV === 'development') {
    return `module.exports = ${hash};`;
  } else {
    // 生产环境返回RN可识别的uri对象
    const outputPath = this._module.generatorOptions.filename.replace('[hash]', hash);
    return `module.exports = { uri: '${outputPath}' };`;
  }
};

2. 修改webpack.config.js中的资源规则，替换默认的asset/resource：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: path.resolve(__dirname, 'rn-asset-loader.js'),
          }
        ],
        type: 'javascript/auto', // 禁用Webpack默认的asset处理逻辑
      }
    ]
  }
};

方案2：修改Webpack输出为RN兼容的对象格式 #

如果不需要模拟数字ID，直接让Webpack返回{ uri: 资源路径 }对象，也能满足Image组件要求：

1. 安装string-replace-loader依赖：

npm install string-replace-loader --save-dev

2. 修改webpack.config.js的资源规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[hash][ext][query]',
        },
        parser: {
          dataUrlCondition: {
            maxSize: 0 // 强制所有图片输出为文件，不内嵌base64
          }
        }
      },
      // 将资源路径包装为RN可识别的对象
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'string-replace-loader',
        options: {
          search: 'module.exports = "(.*)";',
          replace: 'module.exports = { uri: "$1" };',
          flags: 'g'
        }
      }
    ]
  }
};

验证效果 #

修改后导入图片：

import logo from './assets/logo.png';
// 开发环境：logo为数字ID；生产环境：logo为{ uri: 'assets/xxx.png' }
<Image source={logo} />

此时Image组件的source属性符合类型要求，不会再触发prop错误。

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