在React Native中从route.paramns获取图像

问题描述 投票:0回答:1

我正在尝试为我的小组成员制作一个个人资料屏幕。 我的想法是使用路由参数为四个屏幕制作一种字体来设置所有信息,如下所示:

<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>

当我尝试使用从参数(照片)获取的路径从文件夹中获取图像时,我收到错误并且不知道如何继续

我的屏幕字体:

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>
    )
};
javascript reactjs react-native react-navigation
1个回答
2
投票

您在传递图像路径时犯了一个错误。您可以按照以下代码操作:

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

并将其用作道具,如下所示:

<Image source={Foto}/>

注意:有关更多信息,请参阅:加载作为道具传递的图像反应本机

© www.soinside.com 2019 - 2024. All rights reserved.