React Native中index.js批量导出图片后无法加载的解决方法

问题根源 #

你当前的导出和导入方式不匹配：images/index.js里用export default导出了一个包含所有图片的对象，但导入时用了命名导入（import {FingerPrint} from ...），这会导致FingerPrint的值为undefined，自然无法加载图片。

两种修复方案 #

方案1：改用命名导出（推荐）

修改images/index.js，直接对每个图片做命名导出：

export { default as FingerPrint } from "./FingerPrint.png";
export { default as FullBrand } from "./BrandLarger.png";
export { default as LogInBG } from "./LogInBG.png";
export { default as NBEBrand } from "./NBEBrand.png";
export { default as NBELogo } from "./NBELogo.png";

这样你原来的导入代码import {FingerPrint} from "../assets/images";就可以正常工作，使用<Image source={FingerPrint} />也没问题。

方案2：保持默认导出，调整导入方式

如果不想修改index.js的导出逻辑，需要把整个默认导出的对象导入，再访问对应的图片属性：

import Images from "../assets/images";

使用时改为：

<Image source={Images.FingerPrint} />

额外注意事项 #

• 文件名大小写敏感：React Native对文件名的大小写严格区分，确保index.js里导入的文件名和实际图片文件名完全一致（比如FingerPrint.png不能写成fingerprint.png）。
• 必须设置Image宽高：React Native的Image组件默认没有宽高，即使图片加载成功也会显示空白，一定要给组件添加style指定宽高：

<Image source={FingerPrint} style={{ width: 60, height: 60 }} />

• 重置metro缓存：如果修改后还是无法加载，执行npx react-native start --reset-cache清除缓存，再重新启动项目。

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