1

如何在 react-native 的部分列表中显示以下对象数组

"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":""
        }
    ]
}

我想将“附加产品”和“附加产品二”显示为部分的标题，并将对象中的标签显示为内容项。我该怎么做？我应该转换为任何其他格式以在部分列表中显示它吗？ -本国的？

4

2 回答 2

0

首先，你需要按照 React Native 中 SectionList 支持的格式转换你的数据。

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>
        );
    }
}

希望这可以帮助你。随意怀疑。

于 2020-03-06T04:47:36.563 回答
-1

试试下面

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} />
于 2020-03-04T14:43:33.927 回答