React Native引入文件名含空格的本地图片无法加载问题求助

问题原因 #

• 核心问题是React Native的打包工具Metro在iOS平台处理静态资源路径时的URL编码适配缺陷：当你导入的文件名包含空格时，Metro会自动将空格转义为%20，但iOS原生的资源查找逻辑不会对路径做URL解码，会直接把%20作为文件名的一部分去查找对应资源，因此找不到不存在的Allan%20Munger@2x.png文件，触发报错。
• 你给出的测试结果也直接验证了该逻辑：删除文件名中的空格后，路径不需要转义处理，资源就能被系统正常识别加载。

修复方案 #

方案1（最推荐） #

统一静态资源命名规范，所有资源文件名避免使用空格、特殊字符，用驼峰命名、下划线或短横线代替空格即可，和你测试生效的修改一致：

// 修改前（错误）
// import Image from '@src/assests/images/avatars/Allan Munger.png';
// 修改后（正确）
import Image from '@src/assests/images/avatars/AllanMunger.png';

方案2（适配保留空格的场景） #

如果业务要求必须保留文件名中的空格，可以在传入Image组件的source属性前，手动对路径做URL解码处理：

// ImageCircle组件内修改代码
<Image source={decodeURI(uri)} style={{width: 60, height: 60}} />

额外优化建议 #

你当前ImageCircle组件内的Image组件宽高写法不符合React Native规范：React Native的Image组件宽高需要定义在style属性中，直接写width={60} height={60}是不生效的，同时可以给图片加上圆角避免图片超出圆形外层容器，建议同步修改：

<Image 
  source={uri} 
  style={{
    width: 60, 
    height: 60, 
    borderRadius: 30
  }} 
/>

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