React native 反应本机部分列表数据格式问题？

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

所需图片：{ 附加产品：[ { 所需图片编号：001， 标签：MRI， 你的照片是真的， url:https:bbymakeitright.png }, { 所需图片编号：002， 标签：MR， 你的照片是真的， url:https:bbymakeitright.png } ], 附加产品二：[ { 所需图片\u id:003， 标签：IMR， 你的照片是真的， url:https:bbymakeitright.png }, { 所需图片编号：004， 标签：IR， 图为：假， 网址： } ] } 我想将附加产品和“附加产品2”显示为节的标题，并将对象中的标签显示为内容项。我怎样才能做到？我是否应该转换为任何其他格式以在“react native”部分列表中显示它？

请尝试下面的方法

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} />

---

首先，您需要根据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>
        );
    }
}

---

希望这对你有帮助。请放心。

我得到的API响应如上述格式所示。我们该怎么做？如果您知道如何使用状态，只需将数据设置为状态变量即可。如何将上述数据的格式更改为节列表格式。这是节列表中使用的格式。参考：