React Native SectionList Изображения из JSON

avatar
Michael
1 июля 2021 в 16:34
201
1
0

У меня возникли проблемы с отображением изображения в списке разделов из файла 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>)}
    />

Любая помощь приветствуется. Пожалуйста, дайте мне знать, если мне нужно добавить дополнительную информацию!

Спасибо!

Источник
Ugur Eren
1 июля 2021 в 16:52
0

Динамический импорт — это антипаттерн. Вы не должны динамически импортировать изображения. Даже если вы успешно заставите его работать, изображения все равно не будут скопированы в пакет, потому что реагирующий натив будет думать, что эти изображения не используются. github.com/benmosher/eslint-plugin-import/blob/v2.22.1/docs/…

Michael
1 июля 2021 в 16:54
0

Спасибо @UğurEren, есть ли способ правильно добиться этого эффекта?

Michael
1 июля 2021 в 16:57
0

Без жесткого кодирования каждого изображения в

Ответы (1)

avatar
Ugur Eren
1 июля 2021 в 17:01
0

Вы можете использовать оператор 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');
  }
}

и используйте эту функцию 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",
    },
  ],
};
Michael
1 июля 2021 в 17:04
0

Спасибо, что поделились! Является ли оператор switch лучшим способом сделать это, когда имеется более 50 изображений?

Ugur Eren
1 июля 2021 в 17:06
0

К сожалению, да

Michael
1 июля 2021 в 17:07
1

Большое спасибо за Вашу помощь:)