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

【问题标题】：How to insert route params inside image URL in React Native / Navigation?如何在 React Native / Navigation 中的图像 URL 中插入路由参数？
【发布时间】：2022-01-17 09:50:09
【问题描述】：

在我的应用程序的第一个屏幕上，我有一个可触摸的图像，它实际上将路由参数发送到第二个屏幕，如下所示：

<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 中的参数）：

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

但是这段代码不起作用，我在 require 中找不到任何与 params 相关的内容：

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

知道为什么它不起作用以及如何解决这个问题吗？如果您能提供帮助，非常感谢。

【问题讨论】：

标签： react-native react-navigation routeparams

【解决方案1】：

找到解决方案。

有人告诉我，我们不能在 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} />

现在一切正常。但是，如果由于某种原因这是不好的做法或以任何方式被弃用，我很想知道原因。

【讨论】：