Как визуализировать SectionList с помощью вложенных циклических объектов в данных - PullRequest
Новая
       43

Как визуализировать SectionList с помощью вложенных циклических объектов в данных

0 голосов
/ 27 июня 2019

У меня нижеприведенная структура json 

{
  "title": "Name(s)",
  "type": "Text",
  "data": [
    {
      "source": "DB",
      "title": "All",
      "list": [
        {
          "name": "ABCD",
          "count": 1
        },
        {
          "name": "BCDE",
          "count": 1
        },
        {
          "name": "CDEF",
          "count": 1
        },
        {
          "name": "DEFG",
          "count": 2
        },
        {
          "name": "EFGH",
          "count": 1
        }
      ]
    }
  ]
},
{
  "title": "Category(s)",
  "type": "Text",
  "data": [
    {
      "source": "DB",
      "title": "All",
      "list": [
        {
          "name": "Vegetables",
          "count": 1942
        },
        {
          "name": "Saloon",
          "count": 355
        },
        {
          "name": "General Store",
          "count": 331
        },
        {
          "name": "Restaurants",
          "count": 130
        },
        {
          "name": "Fast Food",
          "count": 108
        }
      ]
    }
  ]
}

Я пытаюсь показать данные как Like

1stHeaderHeader: "Имя (я)"
1stRow: "ABCD"
2ndRow "BCDE"
3rdRow "CDEF"
.
.
.

2ndCheader: "Category (s)" 1stRow: "Vegetables"
2ndRow "Saloon"
3rdRow "General Store"
.
.
.
Здесь я должен использовать SectionList / Flatlist / Mix для получения указанного выше результата.

В flatlist / sectionlist я получаю Имена и категории заголовков разделов в renderSectionHeader, но в renderItem,Как можно зациклить массив «список» объектов.Пожалуйста, дайте мне знать

1 Ответ

1 голос
/ 27 июня 2019

Вы должны обновить данные, как показано ниже,

например: 

[
  {
    "title": "Name(s)",
    "type": "Text",
    "data": [
      {
        "name": "ABCD",
        "count": 1
      },
      {
        "name": "BCDE",
        "count": 1
      },
      ...
    ]
  },
  {
    "title": "Category(s)",
    "type": "Text",
    "data": [
      {
        "name": "Vegetables",
        "count": 1942
      },
      {
        "name": "Saloon",
        "count": 355
      },
      ...
    ]
  }
...
]

И используйте SectionList для отображения,

например: 

 ...
    <SectionList
      renderItem={({item, index, section}) => <Text key={index}>{item.name}</Text>}
      renderSectionHeader={({section: {title}}) => (
        <Text style={{fontWeight: 'bold'}}>{title}</Text>
      )}
      sections={this.state.data}
      keyExtractor={(item, index) => item + index}
    />
    ...
...