React Native如何动态渲染图片？附报错示例

React Native 的资源打包机制要求 require() 的路径必须是静态可解析的字符串，不能通过变量动态拼接路径，所以你写的 require(./assets/${item}.png) 会触发报错——打包工具无法在编译阶段确定要加载的具体资源。

以下是几种可行的解决方案：

方案一：提前映射本地图片（推荐，适合已知图片列表场景） #

把所有可能用到的本地图片提前用 require 导入，做成键值对映射，然后根据传入的 item 值匹配对应的图片源：

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

// 提前导入所有需要的图片，键名和item值对应
const imageMap = {
  apple: require('./assets/apple.png'),
  banana: require('./assets/banana.png'),
  orange: require('./assets/orange.png'),
  // 可继续添加更多图片
};

const MyComponent = ({ item }) => {
  // 从映射中取图片，可设置默认图避免找不到的情况
  const imageSource = imageMap[item] || require('./assets/default.png');

  return (
    <View>
      <Image source={imageSource} style={{ width: 100, height: 100 }} />
    </View>
  );
};

export default MyComponent;

方案二：使用远程图片URI #

如果图片不是本地资源，而是存储在服务器上，直接使用 uri 格式的图片源即可：

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

const MyComponent = ({ item }) => {
  // 拼接远程图片地址
  const imageSource = { uri: `https://your-domain.com/assets/${item}.png` };

  return (
    <View>
      {/* 远程图片必须指定宽高 */}
      <Image source={imageSource} style={{ width: 100, height: 100 }} />
    </View>
  );
};

export default MyComponent;

方案三：修改Metro配置支持动态路径（进阶，适合大量本地图片场景） #

如果本地图片数量极多，不想逐个导入，可以修改Metro打包配置，让它支持特定目录下的动态路径解析：

1. 在项目根目录创建/修改 metro.config.js：

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

const defaultConfig = getDefaultConfig(__dirname);

module.exports = mergeConfig(defaultConfig, {
  resolver: {
    // 确保包含你的图片扩展名
    assetExts: [...defaultConfig.resolver.assetExts, 'png', 'jpg', 'jpeg'],
    // 配置允许动态解析的资源路径
    extraNodeModules: new Proxy({}, {
      get: (target, name) => {
        return `${__dirname}/assets/${name}`;
      },
    }),
  },
  transformer: {
    inlineRequires: true,
  },
});

2. 然后在组件中使用动态路径：

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

const MyComponent = ({ item }) => {
  // 路径要和Metro配置中的assets目录对应
  const imageSource = require(`../assets/${item}.png`);

  return (
    <View>
      <Image source={imageSource} style={{ width: 100, height: 100 }} />
    </View>
  );
};

export default MyComponent;

注意：这种方式会把指定目录下的所有图片都打包进安装包，可能导致包体积增大，需谨慎使用。

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