将值输入react原生svg-uri

Question

你好，我正试图在React Native中向SVG URI输入一个值，如下所示：

source={require('../tasks/images/' + {task.image} + '.png')} 

我目前正在迭代一个对象数组，并为每个对象输出svg，所以我想用这种方式来做，但语法不被接受。

欢迎任何帮助或建议！

Answer 1

因为没有办法动态地将字符串传递给require，所以您可以有一个引用您需要的每个图像的图像收集文件，例如：

创建一个包含以下内容的文件ImageCollection.js：

export default imageCollection={
"1": require("./image1.png"),
"2": require("./image2.png"),
"3": require("./image3.png"),
"4": require("./image4.png")
}

然后将其导入到您需要图像的文件中，并执行以下操作：

import Images from './ImageCollection.js';
class YourComponent extends Component {
renderItem = ({item}) => (
<View>
<Text>Image: {item}</Text>
<Image source={Images[item]}/>
</View>
);
render () {
const data = ["1","2","3","4","5"]
return (
<FlatList data={data} renderItem={this.renderItem}/>
)
}
}
export default YourComponent;

但是，如果你真的需要传递动态图像源，那么你可以使用像react native image progress这样的包，它可以让你传递一个变量作为图像源，我不推荐这种方法，除非你绝对没有其他方法来解决这个问题。

Answer 2

在这里，您不能传递动态图像路径，该路径在本地可用作您的assests
此外，如果你有来自服务器的图像URI，那么你可以在这里提供，它会像符咒一样工作。但对于本地存在的图像路径，您必须提供实际路径。你可以在这里阅读更多内容。

然而，你可以做的只是根据条件为路径提供嵌套的if-else，但请注意，你也必须提供完整的路径。

示例：-

source={this.state.data===1?require('../tasks/images/image1.png'):this.state.data===2?require('../tasks/images/image2.png'):require('../tasks/images/image3.png')} 

谢谢。。。。希望有帮助：(