Формат данных списка реагирующих разделов Вопрос? - PullRequest
Новая
       23

Формат данных списка реагирующих разделов Вопрос?

1 голос
/ 04 марта 2020

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

"RequiredPictures":{
    "Additional product ":[
        {
           "required_picture_id":"001",
           "label":"MRI",
           "has_picture":true,
            "url":"https:bbymakeitright.png"
        },
        {
           "required_picture_id":"002,
           "label":"MR",
           "has_picture":true,
            "url":"https:bbymakeitright.png"
        }
    ],
    "Additional product two":[
        {
           "required_picture_id":"003",
           "label":"IMR",
           "has_picture":true,
           "url":"https:bbymakeitright.png"
        },
        {
           "required_picture_id":"004",
           "label":"IR",
           "has_picture":false,
           "url":""
        }
    ]
}

Я хочу показать «Дополнительный продукт» и «Дополнительный продукт два» в качестве заголовка раздела и метки в объект как элемент содержимого. Как я могу это сделать? Должен ли я преобразовать его в любой другой формат, чтобы отобразить его в списке разделов «native-native»?

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Прежде всего, вам необходимо преобразовать ваши данные в соответствии с форматом, который поддерживает SectionList в React Native. 

let RequiredPictures = {
    "Additional product": [
        {
            "required_picture_id": "001",
            "label": "MRI",
            "has_picture": true,
            "url": "https:bbymakeitright.png"
        },
        {
            "required_picture_id": "002",
            "label": "MR",
            "has_picture": true,
            "url": "https:bbymakeitright.png"
        }
    ],
    "Additional product two": [
        {
            "required_picture_id": "003",
            "label": "IMR",
            "has_picture": true,
            "url": "https:bbymakeitright.png"
        },
        {
            "required_picture_id": "004",
            "label": "IR",
            "has_picture": false,
            "url": ""
        }
    ]
}

let newData = [
    { title: Object.keys(RequiredPictures)[0], data: RequiredPictures[Object.keys(RequiredPictures)[0]] },
    { title: Object.keys(RequiredPictures)[1], data: RequiredPictures[Object.keys(RequiredPictures)[1]] },
]

console.log(newData)

Затем вы можете использовать эти данные для отображения вашего списка разделов 

import React, { Component } from 'react';
import { SectionList, Text, SafeAreaView } from 'react-native';

const RequiredPictures = {
    "Additional product": [
        {
            "required_picture_id": "001",
            "label": "MRI",
            "has_picture": true,
            "url": "https:bbymakeitright.png"
        },
        {
            "required_picture_id": "002",
            "label": "MR",
            "has_picture": true,
            "url": "https:bbymakeitright.png"
        }
    ],
    "Additional product two": [
        {
            "required_picture_id": "003",
            "label": "IMR",
            "has_picture": true,
            "url": "https:bbymakeitright.png"
        },
        {
            "required_picture_id": "004",
            "label": "IR",
            "has_picture": false,
            "url": ""
        }
    ]
}

export default class App extends Component {
    render() {
        let newData = [
            { title: Object.keys(RequiredPictures)[0], data: RequiredPictures[Object.keys(RequiredPictures)[0]] },
            { title: Object.keys(RequiredPictures)[1], data: RequiredPictures[Object.keys(RequiredPictures)[1]] },
        ]
        return (
            <SafeAreaView style={{ flex: 1, marginTop: 20 }}>
                <SectionList
                    sections={newData}
                    keyExtractor={(item, index) => item + index}
                    renderSectionHeader={({ section }) => (
                        <Text style={{ fontSize: 20, backgroundColor: 'gray' }}>{section.title}</Text>
                    )}
                    renderItem={({ item }) => <Text>{item.label}</Text>}
                />
            </SafeAreaView>
        );
    }
}

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

0 голосов
/ 04 марта 2020

Попробуйте ниже 

const sections = [
  {
    title: "Additional product",
    data: [
      {
         "required_picture_id":"001",
         "label":"MRI",
         "has_picture":true,
          "url":"https:bbymakeitright.png"
      },
      {
         "required_picture_id":"002,
         "label":"MR",
         "has_picture":true,
          "url":"https:bbymakeitright.png"
      }
    ],
  },
  {
    title: "Additional product two",
    data: [
      {
         "required_picture_id":"003",
         "label":"IMR",
         "has_picture":true,
         "url":"https:bbymakeitright.png"
      },
      {
         "required_picture_id":"004",
         "label":"IR",
         "has_picture":false,
         "url":""
      }
    ]
  }
];

<SectionList sections={sections} />
...