如何在 React Native / Navigation 中的图像 URL 中插入路由参数?
Posted
技术标签:
【中文标题】如何在 React Native / Navigation 中的图像 URL 中插入路由参数?【英文标题】:How to insert route params inside image URL in React Native / Navigation? 【发布时间】: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') />
知道为什么它不起作用以及如何解决这个问题吗?如果您能提供帮助,非常感谢。
【问题讨论】:
【参考方案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 />
现在一切正常。 但是,如果由于某种原因这是不好的做法或以任何方式被弃用,我很想知道原因。
【讨论】:
以上是关于如何在 React Native / Navigation 中的图像 URL 中插入路由参数?的主要内容,如果未能解决你的问题,请参考以下文章
我需要下载 react-navigation 并使用命令 npm i @react-navigation/native 并显示错误
React-Native + crypto:如何在 React-Native 中生成 HMAC?
React-native:如何在 React-native 中使用(和翻译)带有 jsx 的 typescript .tsx 文件?