Question

我有一个包含事件的数组，并通过FlatList在react native中显示它们，这很好。但在某些日期有多个事件，这意味着它还会多次打印日期。

如何只打印一次日期（有多个事件）。

这是呈现行的代码：

renderRow({item}) {
    const eventdate = moment(item.start.dateTime);
    const today = (moment() == eventdate) ? styles.today : undefined;
    const date = item.start.dateTime;
    return (
        <View style={styles.datesContainer}>
            {date ?
                <View style={styles.day}>
                    <Text allowFontScaling={false} style={[styles.dayNum, today]}>{moment(date).format('DD')}</Text>
                    <Text allowFontScaling={false} style={[styles.dayText, today]}>{moment(date).format('dd')}</Text>
                </View>
            :
                <View style={styles.day}/>
            }
            <View style={[styles.item, {height: item.height}]}>
                <Text style={styles.itemtitle}>{item.summary}</Text>
                <Text>{moment(item.start.dateTime).format('HH:mm')} - {moment(item.end.dateTime).format('HH:mm')}</Text>
                <Text>{item.description}</Text>
            </View>
        </View>
    )
}

所以我只想打印一次日期，即使该日期有多个事件。所以基本上有一个空视图用于对齐。

这就是数据转储的样子：

'row', { kind: 'calendar#event',
etag: '"etag"',
id: 'ID',
status: 'confirmed',
htmlLink: 'html link',
created: '2017-12-13T10:44:49.000Z',
updated: '2017-12-13T13:09:07.860Z',
summary: 'title',
creator: { email: 'email' },
organizer: 
{ email: 'cal email',
 displayName: 'displayname',
 self: true },
start: 
{ dateTime: '2018-04-08T08:45:00+02:00',
 timeZone: 'Europe/Amsterdam' },
end: 
{ dateTime: '2018-04-08T09:30:00+02:00',
 timeZone: 'Europe/Amsterdam' },
recurringEventId: 'recurringEventId',
originalStartTime: 
{ dateTime: '2018-04-08T08:45:00+02:00',
 timeZone: 'Europe/Amsterdam' },
iCalUID: 'icalUID',
sequence: 0 }
'row', { kind: 'calendar#event',
etag: '"etag"',
id: 'ID',
status: 'confirmed',
htmlLink: 'html link',
created: '2017-12-13T10:44:49.000Z',
updated: '2017-12-13T13:09:07.860Z',
summary: 'title',
creator: { email: 'email' },
organizer: 
{ email: 'cal email',
 displayName: 'displayname',
 self: true },
start: 
{ dateTime: '2018-04-08T10:00:00+02:00',
 timeZone: 'Europe/Amsterdam' },
end: 
{ dateTime: '2018-04-08T13:00:00+02:00',
 timeZone: 'Europe/Amsterdam' },
recurringEventId: 'recurringEventId',
originalStartTime: 
{ dateTime: '2018-04-08T10:00:00+02:00',
 timeZone: 'Europe/Amsterdam' },
iCalUID: 'icalUID',
sequence: 0 }

正如您所看到的，同一天有2个事件，但起始时间不同。

Answer 1

如果要this.globalDate检查是否要显示日期，请如何：

renderRow({item}) {
    ...
    const date = item.start.dateTime;
    let isShowDate = False;
    if (this.globalDate !== date) {
        isShowDate = True;
    }
    else {
        this.globalDate = date;
    }
    return (
        <View style={styles.datesContainer}>
            {date && isShowDate ?
            ....
        </View>
    )
}

如果您从API获取sorted data，则此方法有效。否则，使用数组存储所有日期并检查date是否已经显示（在datesArray中），如：

renderRow({item}) {
    ...
    const date = item.start.dateTime;
    let isShowDate = True;
    if (this.globalDates.includes(date)) {
        isShowDate = False;
    }
    else {
        this.globalDates.push(date);
    }
    return (
        <View style={styles.datesContainer}>
            {date && isShowDate ?
            ....
        </View>
    )
}

具有数组日期的Javascript只打印一次

1 个答案: