React来自JSON的Native SectionList图像

Question

尽管我在文本数据方面没有遇到问题，但我在从JSON文件将图像渲染到节列表上时遇到了一些问题。

这是我的JSON数据：

{
"title" : "Friday",
"data": 
[
{
"artist": "artist 1",
"stage": "The Oak",
"Instagram": "insta",
"Spotify": "spot",
"date": "10/8/2021",
"Image": "../assets/art1.jpg",
"Time" : "4:30PM - 5:00 PM"
},
{
"artist": "artist 2",
"stage": "The Oak",
"Instagram": "insta",
"Spotify": "spot",
"date": "10/8/2021",
"Image": "../assets/art2.jpg",
"Time" : "5.00PM - 5:30 PM"
}

]},

我知道你必须使用require函数来渲染它，但我似乎无法正确处理。

这是分区列表：

<SectionList
sections={data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (<View style={styles.listItemView}>
<Image style={styles.image} source={require(item.Image)} />
<View>
<Text style={styles.listItem}>{item.artist}</Text>
<Text style={styles.listItemTime} >{item.Time}</Text>
</View>
</View>)}
renderSectionHeader={({ section }) => (
<View style={styles.item}>
<Text style={styles.title}>{section.title}</Text>
</View>)}
/>

欢迎任何帮助。如果我需要添加附加信息，请告诉我！

谢谢！

Answer 1

您可以使用if-else或switch语句来获取要使用的图像。

const getArtImage = (artName) => {
switch (artName){
case 'art1':
return require('../assets/art1.jpg');
case 'art2':
return require('../assets/art2.jpg');
default:
return require('../assets/defaultArt.jpg');
}
}

并在您的Image组件中使用此getArtImage函数。

<Image style={styles.image} source={getArtImage(item.Image)} />

item.Image应该像art1、art2等

--

如果您的json是本地文件，则可以将其转换为js文件。

export default {
title: "Friday",
data: [
{
artist: "artist 1",
stage: "The Oak",
Instagram: "insta",
Spotify: "spot",
date: "10/8/2021",
Image: require("../assets/art1.jpg"),
Time: "4:30PM - 5:00 PM",
},
{
artist: "artist 2",
stage: "The Oak",
Instagram: "insta",
Spotify: "spot",
date: "10/8/2021",
Image: require("../assets/art2.jpg"),
Time: "5.00PM - 5:30 PM",
},
],
};