React Native的Image的source={require()}拼接bug

粉色水杯

已于 2022-04-04 14:51:13 修改

阅读量1k

点赞数 2

文章标签： react

于 2022-04-04 09:42:21 首次发布

本文链接：https://blog.youkuaiyun.com/linxuanasd/article/details/123948880

版权

在React Native中，直接使用数组中的url与`require()`结合无法正确加载图片。解决方法是先将图片路径转换为变量，然后在`require()`中引用该变量，以此确保图片能被正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

require()他不能拼接

在数组中写好图片路径，直接arr.url，放在require()是不生效的。

如下图所示

{
                    arr.map((item, i) => {
                        return<TouchableOpacity key={i} style={styles.frame}>
                            <Image style={styles.photo}
                source={require(item.url)}
              />
                        </TouchableOpacity>
                    })
                }

这样是获取不到图片路径的。

改变一下

需要取出后声明一个变量，转一下

const url = ~~item.url

再进行使用

<Image style={styles.photo}   source={url}  />

最低0.47元/天解锁文章