React Native传递图片名称给子组件失效，如何动态加载图片？

React Native 的 require 不支持动态拼接路径（比如require(../assets/${item.name}.png)），因为 Metro 打包器在构建阶段需要静态分析所有资源引用，动态生成的路径无法被识别，导致资源找不到。以下是可行的解决方法：

方法一：创建静态图片映射表 #

提前将所有需要用到的图片资源通过 require 导入，存入一个键值对对象中，然后通过 item.name 作为键去获取对应的图片资源。

1. 新建一个图片映射文件（比如 src/utils/imageMap.js）：

export const imageMap = {
  "cat": require("../assets/cat.png"),
  "dog": require("../assets/dog.png"),
  "bird": require("../assets/bird.png"),
  // 把所有需要动态调用的图片都在这里注册
};

2. 在 Page 组件中使用：

import { imageMap } from "../utils/imageMap";
import { Image } from "react-native";

const Page = ({ item }) => {
  // 确保item.name存在于imageMap的key中，可添加容错处理
  const imageSource = imageMap[item.name] || require("../assets/default.png");
  
  return <Image source={imageSource} />;
};

方法二：使用本地资源的绝对路径（仅适用于特定场景） #

如果你的图片是存放在设备本地而非项目assets目录，可通过文件路径直接引用，但这种方式不适合项目打包时的内置资源。

注意事项 #

• 确保 item.name 与映射表中的键完全匹配，包括大小写（不同平台对文件名大小写敏感度不同）。
• 可添加默认图片 fallback，避免因键不存在导致的报错。

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