react native中具有变量的图像源

Question

我有一个api，可以让我获得一个图像名称，比如这个

var iconApi = value.icoapi

这个value.icoapi是一个通用名称，因为我从一个api获得它，我试图写一个像这样的图像代码

<Thumbnail source={require('../assets/imgs/ico.png')} />

但我需要更改最后一部分"ico.png"，为我的变量更改它，类似于

<Thumbnail source={require('../assets/imgs/+ iconApi')} />

但返回错误，

感谢

Answer 1

您需要将URI作为源传递。如果CCD_ 3是http或更好的hptts链路。请让我知道它是否有效，投赞成票会很好。

<Thumbnail source={{uri: value.icoapi}} />

Answer 2

这就是我解决类似您描述的问题的方法，在这里，我需要根据它是否聚焦来更改和图标

tabBarIcon: ({ focused, color }) => {
let source
if(focused){
source = require('./src/assets/home-icon-active.png')
}else{
source = require('./src/assets/home-icon.png')
}
return (<Image source={source} style={{ width: 20, height: 20 }} />)
} 

我认为它可能像你需要的一样工作

Answer 3

如果要将文件名设置为+iconApi，则应使用：

<Thumbnail source={require(`../assets/imgs/${iconApi}`)} />

这是利用ES6模板文字。更多详细信息请点击此处。

Answer 4

从2022年开始更新，也许有人会发现它很有用，它可以适应不同的需求：

我已经用useState钩子完成了：

const [linkBG, setLinkBg] = useState(require('../assets/2.jpg'))
function BackgroundChange() {
if (background === 1) {
setLinkBg(require('../assets/2.jpg'))
} else if (background === 2) {
setLinkBg(require('../assets/3.jpg'))
} else if (background === 3) {
setLinkBg(require('../assets/4.jpg'))
}

等等。
}

在返回中

<ImageBackground style={styles.container} source={`${linkBG}`}>

干杯