时间戳

首页 > 解决方案 > 来自 JSON 的反应本机 SectionList 图像

javascript - 来自 JSON 的反应本机 SectionList 图像

问题描述

即使文本数据没有问题，我在将图像从 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>)}
    />

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

谢谢！

标签： javascriptreact-nativereact-native-flatlistreact-native-sectionlist

解决方案

您可以使用 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",
    },
  ],
};

推荐阅读