React Native中通过route.params传图片路径require加载报错如何解决

React Native 加载本地静态图片依赖Metro打包工具的编译阶段静态分析：只有代码里写死路径的require('xxx.png')语句，才会被工具识别，把对应图片打进应用安装包。你现在的写法有两个核心错误：

1. 路由参数传的是字符串格式的相对路径，属于运行时才会拿到的动态值，Metro在打包阶段没法预判这个路径对应哪个资源，不会把图片打进包。
2. Image组件里写的source={require({Foto})}语法本身错误，就算改成require(Foto)也会因为动态路径的问题加载失败。

方案1：路由传提前声明的资源引用（最适配你的多模板复用需求） #

不要传路径字符串，在配置跳转逻辑的页面，提前给每个成员的头像写好固定的require语句，把生成的资源引用作为参数传给Profile页，Metro能正常识别所有要打包的图片。
修改跳转处代码：

<TouchableOpacity 
  style={styles.ident1} 
  onPress={() => navigation.navigate('Profile', {
    Nome: 'Ângelo J. da Rosa', 
    Resto: ['19 Anos', 'Cocal do Sul - SC'], 
    Foto: require('../../assets/angelo.jpeg') // 直接传require返回的资源引用，不要传字符串
  })}
>
  <Text style={{ fontSize: 20,fontWeight: 'bold' }}>Angelo</Text>
</TouchableOpacity>

修改Profile页的Image组件，直接使用传入的资源引用，不需要再套require：

<Image
  style={styles.image}
  source={Foto}
/>

后续新增其他成员的个人资料入口时，只需要在对应跳转项里给Foto字段绑定对应图片的require语句即可，Profile模板页不需要修改任何逻辑。

方案2：使用网络图片/Base64格式图片 #

如果不想提前require所有本地图片，也可以把成员头像上传到可访问的图床、静态资源服务，或者转成Base64字符串，路由参数直接传图片的http链接或者Base64字符串，Profile页用uri格式加载：

// 路由传参示例
Foto: 'https://你的资源域名/angelo.jpeg'
// Foto: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...'

Profile页Image写法：

<Image
  style={styles.image}
  source={{ uri: Foto }}
/>

注意：不要直接给uri传assets目录下的相对路径字符串，RN无法解析这类路径对应安装包内的资源位置，会直接加载失败。

• 你写的<View style={[styles.views, styles.ident1]}>, 标签末尾多了一个多余的逗号，会触发语法报错，直接删除即可。
• 当前跳转逻辑里Resto数组只传了2个元素，但模板中渲染到了Resto[4]，会出现空白文本项，建议要么补全对应参数，要么加条件判断，不存在的数组项不渲染对应Text组件。

内容的提问来源于stack exchange，提问作者Ângelo José