[英]How to render SectionList Header?
How do I render Object Key as a SectionList Header?如何将 Object 键呈现为 SectionList Header? So that I can make Section based on Today's Yesterday.
这样我就可以根据今天的昨天制作部分。 Below I have provided the Object where Object is group by date with the help of Lodash and date is formatted using moment
下面我提供了 Object ,其中 Object 在 Lodash 的帮助下按日期分组,日期使用时刻格式化
Code Link: Snack expo代码链接:小吃 expo
Object: 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"
}
]
}
I have used moment and lodash to format the data我使用了 moment 和 lodash 来格式化数据
Code I tried:我试过的代码:
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>
);
}
You are using the wrong data for the section list.您为部分列表使用了错误的数据。 section list required an array of objects having the title as header and data array as lists.
部分列表需要标题为 header 的对象数组和列表形式的数据数组。
[ {
title:"Header",
data:["Data1","data3"]
},
{ ... }, { ... } ]
for your data set, you need to modify the data as对于您的数据集,您需要将数据修改为
...
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);
...
you can refer here: https://reactnative.dev/docs/sectionlist你可以参考这里: https://reactnative.dev/docs/sectionlist
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.