如何在React Native/Navigation中的图像URL中插入路由参数



在我的应用程序的第一个屏幕上,我有一个可触摸的图像,它实际上将路由参数发送到第二个屏幕,看起来像这样:

<TouchableHighlight onPress={() => navigation.navigate("EcranDetails",{album_id:1,album_name:"David Bowie",album_date:1967,album_img:"david_bowie"})}>
<Image style={styles.album} source={require('../../assets/images/albums/david_bowie.jpg')} />
</TouchableHighlight>

在我的第二个屏幕上,我想要这个(图像的url字符串来自require中的params(:

<Image style={styles.album} source={require('../../assets/images/albums/david_bowie.jpg')} />

但这个代码不起作用,我在require:中找不到任何与参数相关的东西

<Image style={styles.album} source={require('../../assets/images/albums/',{JSON.stringify(album_img)},'.jpg')} />

知道为什么它不起作用以及我该如何解决吗?如果你能帮忙的话,非常感谢。

找到解决方案。

有人告诉我,我们不能在React Native中进行动态需求,所以我必须将整个需求写入要发送的路由参数,并写入接收器屏幕,在图像的源中,我只需要写入我发送的参数名称。


示例:

发件人屏幕

<TouchableHighlight onPress={() => navigation.navigate("EcranDetails",
{album_id:1,album_name:"David Bowie",album_date:1967,album_img:require("../../assets/images/albums/david_bowie.jpg")})}>
<Image style={styles.album} source={require('../../assets/images/albums/david_bowie.jpg')} />
</TouchableHighlight>

接收器屏幕

const { album_id, album_name, album_date, album_img } = route.params;
<Image style={styles.album} source={album_img} />

现在一切正常然而,如果出于某种原因,这是一种糟糕的做法或以任何方式被弃用,我很想知道为什么。

相关内容

  • 没有找到相关文章

最新更新