react-native 部分列表数据格式问题？答案

【问题标题】：react-native section list data formate Question?react-native 部分列表数据格式问题？
【发布时间】：2020-03-04 12:50:32
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-native-sectionlist

【解决方案1】：

首先，你需要按照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>
        );
    }
}

希望这对您有所帮助。如有疑问，请随意。

【讨论】：

【解决方案2】：

试试下面

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

【讨论】：

我收到如上图所示的 API 响应，我们该怎么办？
如果您知道如何使用state，只需将数据设置为状态变量即可。
如何将上述数据的格式更改为部分列表格式。
这就是 SectionList 中使用的格式。参考：reactnative.dev/docs/sectionlist#example