如何渲染 SectionList Header？

Question

如何将 Object 键呈现为 SectionList Header？这样我就可以根据今天的昨天来制作部分。下面我提供了 Object，其中 Object 是在 Lodash 的帮助下按日期分组的，日期是使用 moment

格式化的

Object :

{
    "18-Apr-2021": [
        {
            "id": 1,
            "title": "Spotify Premium",
            "amount": -9.99,
            "payType": "Subscription",
            "time": "5:22 PM",
            "date": "2021-04-18T08:38:00.889Z"
        },
        {
            "id": 2,
            "title": "Starbucks",
            "amount": -32,
            "payType": "Food",
            "time": "3:34 PM",
            "date": "2021-04-18T08:38:00.889Z"
        }
    ],
    "04-Oct-2021": [
        {
            "id": 4,
            "title": "TopUp",
            "amount": 1500,
            "payType": "Income",
            "time": "Ready to use",
            "date": "10-4-2021"
        },
        {
            "id": 5,
            "title": "Loving Hut Vegan",
            "amount": -32,
            "payType": "out Expenses",
            "time": "10:47 AM",
            "date": "10-4-2021"
        },
        {
            "id": 6,
            "title": "Market",
            "amount": -138.74,
            "payType": "Daily Shopping",
            "time": "10:47 AM",
            "date": "10-4-2021"
        }
    ],
    "04-Aug-2021": [
        {
            "id": 7,
            "title": "Grocery Market",
            "amount": -138.74,
            "payType": "Daily Shopping",
            "time": "10:47 AM",
            "date": "08-04-2021"
        }
    ]
}

我已经用moment和lodash格式化了数据

我试过的代码：

import _ from 'lodash';
import * as React from 'react';
import { Text, View, StyleSheet,SectionList } from 'react-native';
import moment from 'moment';
import Constants from 'expo-constants';
import List from './List'
import {statementHistory} from './data'


export default function App() {
  let group = _.groupBy(statementHistory, e => moment(e.date).format("DD-MMM-YYYY"))
  return (
    <View>
    <SectionList  
                    sections={group}  
                    renderItem={(item) => <List item={item}/>}  
                    renderSectionHeader={(section) => console.log("section",section)}  
                    keyExtractor={(item, index) => index}  
                /> 
    </View>
  );
}

Answer 1

您为分区列表使用了错误的数据。部分列表需要 objects 的数组，标题为 header，数据数组为列表。

[ {
  title:"Header",
  data:["Data1","data3"]
 }, 
 { ... }, { ... } ]

对于你的数据集，你需要修改数据为

...
let group = _.groupBy(statementHistory, e => moment(e.date).format("DD-MMM-YYYY"))
// modify dataset of section List
group = Object.keys(group).map((item) => {
  return {
    title: item,
    data: group[item],
  };
});
console.log(group);
...

你可以参考这里：https://reactnative.dev/docs/sectionlist

如何渲染 SectionList Header？

How to render SectionList Header?

react-native

react-native-sectionlist