我有一个测试交易的 JSON 列表，我可以用它们执行的日期显示它们，但我希望能够对它们进行分组，以便例如今天执行的所有交易都列在一个标有“今天和在同一日期执行的其他交易属于显示该日期的横幅。我试图想办法实现这一点，但我正在苦苦挣扎，任何帮助将不胜感激。
下面是我试图在其中创建此功能的组件。
import React from 'react';
import {
Text,
SafeAreaView,
StatusBar,
ActivityIndicator,
FlatList,
View,
List,
Image,
SectionList,
} from 'react-native';
import moment from 'moment';
import transactions from '../testdata/transactions.json';
import Icon from 'react-native-ionicons'
var datetest = [moment(transactions[0].addedtime).calendar()];
moment.locale('en-uk', {
calendar: {
lastDay: '[Yesterday ]',
sameDay: '[Today]',
nextDay: '[Tomorrow]',
lastWeek: 'L',
nextWeek: 'dddd',
sameElse: 'L',
},
});
class TransactionsComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
epochDate: [],
};
}
componentDidMount() {
this.setState({
isLoading: false,
dataSource: transactions,
epochDate: datetest,
});
}
renderSeparator = () => {
return (
<View
style={{
height: 0,
width: '100%',
backgroundColor: '#F5F5F5 ',
marginLeft: '0%',
}}
/>
);
};
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator />
</View>
);
}
}
render() {
return (
<View style={{width: '100%'}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => (
<View
style={{
flex: 1,
flexDirection: 'column',
borderBottomColor: '#5AA8C8',
borderBottomWidth: 1,
paddingBottom: 10,
}}>
{ <View style={{marginLeft: '3%'}}>
<Text style={{fontWeight: 'bold', fontSize: 18}}>
{moment(item.addedtime).calendar()}
</Text>
</View> }
<View style={{marginLeft: '5%', flexDirection: 'row', flex: 2,}}>
<View
style={{flexDirection: 'row', alignItems: 'center', flex: 3}}>
<Image
style={{width: 40, height: 40}}
source={{uri: item.iconblob}}
/>
<Text
style={{fontSize: 16, color: 'grey', fontWeight: 'bold'}}>
{' '}
{item.merchantname}
</Text>
</View>
<View
style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
marginRight: '3%',
}}>
<Text style={{fontSize: 18, color: 'black'}}>
<Text style={{fontSize: 12, color: 'grey'}}>CHF</Text>
{parseFloat(item.billingamountauthorised / 100).toFixed(2)}
</Text>
<View style= {{flex :6, flexDirection:"row", justifyContent:"flex-end"}}>
<Icon name="arrow-dropright" color="#5AA8C8" />
</View>
</View>
</View>
</View>
)}
keyExtractor={item => item.uniqueref}
//containerStyle={{borderBottomWidth: 0}}
/>
</View>
);
}
}
export default TransactionsComponent;这是一个 JSON 看起来如何的示例，其中 addedtime 是创建事务的纪元日期
[
{
"billingamountauthorised": "1",
"iconblob": "https://is1-ssl.mzstatic.com/image/thumb/Purple114/v4/cb/cf/bb/cbcfbb61-4d03-4f4e-ecf7-b7582688435f/source/512x512bb.jpg",
"merchantname": "K Kiosk Sihlquai",
"merchantstreet": "Sihlquai",
"addedtime": 1576590342000,
"uniqueref": "A446806878486B5B"
},
{
"billingamountauthorised": "750",
"iconblob": "https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1024px-Starbucks_Corporation_Logo_2011.svg.png",
"merchantname": "Starbucks",
"merchantstreet": "Rue du Mont-Blanc",
"addedtime": 1576590342000,
"uniqueref": "D0868EB65DC2DE585"
},
{
"billingamountauthorised": "1",
"iconblob": "https://is1-ssl.mzstatic.com/image/thumb/Purple114/v4/cb/cf/bb/cbcfbb61-4d03-4f4e-ecf7-b7582688435f/source/512x512bb.jpg",
"merchantname": "K Kiosk Sihlquai",
"merchantstreet": "Sihlquai",
"addedtime": 1576590342000,
"uniqueref": "A446806878486B5B0"
},
{
"billingamountauthorised": "100",
"iconblob": "https://is1-ssl.mzstatic.com/image/thumb/Purple114/v4/cb/cf/bb/cbcfbb61-4d03-4f4e-ecf7-b7582688435f/source/512x512bb.jpg",
"merchantname": "K Kiosk Sihlquai",
"merchantstreet": "Sihlquai",
"addedtime": 1575554709000,
"uniqueref": "0D10B5F56A73D73DD"
},
{
"billingamountauthorised": "1320",
"iconblob": "https://pbs.twimg.com/profile_images/568401882444349441/KDWvUHCJ_400x400.jpeg",
"merchantname": "Schweizerische Bundesbahnen",
"merchantstreet": "Bahnhofplatz",
"addedtime": 1575554709000,
"uniqueref": "2F3D907B0FF675216"
}
]这就是当前交易的外观，每个交易都会在其旁边显示日期，无论日期是否与另一笔交易相同。