从路由获取图像.在react native中的参数

Question

我正在尝试为我的小组成员制作一个配置文件屏幕。我的想法是使用路由参数为四个屏幕设置一种字体，如下所示:

<TouchableOpacity style={styles.ident1} onPress={() => navigation.navigate('Profile', {
Nome: 'Ângelo J. da Rosa', Resto: ['19 Anos', 'Cocal do Sul - SC'], Foto: '../../assets/angelo.jpeg'
})}>
<Text style={{ fontSize: 20,fontWeight: 'bold' }}>Angelo</Text>
</TouchableOpacity>

但是当我试图使用我从paramns (Foto)获得的路径从文件夹获取图像时，我得到一个错误，不知道如何进行

我的屏幕字体:

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
export default function Profile({ route, navigation }) {
const { Nome, Resto, Foto } = route.params;
return (
<View style={styles.container}>
<Image
style={styles.image}
source={require({Foto})}
/>
<Text style={[styles.headline]}>{"n"}{Nome}</Text>
<View style={[styles.views, styles.ident1]}>,
<Text style={[styles.desc]}>{Resto[0]}</Text>
<Text style={[styles.desc]}>{Resto[1]}</Text>
<Text style={[styles.desc]}>{Resto[2]}</Text>
<Text style={[styles.desc]}>{Resto[3]}</Text>
<Text style={[styles.desc]}>{Resto[4]}</Text>
</View>
</View>
)
};

Answer 1

您在传递图像路径时犯了一个错误。您可以执行以下代码:

Foto: require('../../assets/angelo.jpeg')

并像这样使用它作为道具:

<Image source={Foto}/>

它一定会起作用的。如果没有，请告诉我，我一定会帮助你的。

注意:更多信息请参考:加载图像作为props react native