反应本机日历

Question

我正在尝试使用 Firebase 动态标记日期和项目来实现本机日历议程。我不确定如何创建此显示器所需的阵列。下面的代码从 firebase 获取数据，但我需要显示相同的数据。请帮助我创建 React Native 日历所需的数组

import React, {useState, useContext, useEffect} from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { CalendarList, Agenda } from "react-native-calendars";
import { Button, Card, Layout, Text } from '@ui-kitten/components';
import moment from 'moment';
import AppContext from './AppContext';
import firebase from '../firebase';

function Calendar() {
  const todaysDate = new moment(new Date()).format("DD-MM-YYYY")
  const [items, setItems] = useState([]);
  const myContext = useContext(AppContext);
  const groups = myContext.userGroups;

  useEffect(() => {
    function loadItems() {
    firebase.database().ref("events").on("value", (userSnapshot) => {
      userSnapshot.forEach(grpid => {
        grpid.forEach(element => {
          const gid = grpid.key;
          
          groups.forEach(usergroupid => {
            const usergrpid = usergroupid.groupid;
            if(usergrpid === gid){
              const id = element.key;
              const sdate = moment((element.child('start').val()), 'DD-MM-YYYY');
              console.log("sdate", sdate);
              const start = moment(sdate).toDate();
              console.log("start", start);
              const edate = moment((element.child('end').val()), 'DD-MM-YYYY');
              const end = moment(edate).toDate();
              const title = element.child('title').val();
              //items[sdate] = [];
              items[sdate] = {name:title}
              setItems(items);
              console.log("new",items);
            }
          });
          
          });
      });
      }); 
  }
  loadItems();
  }, [])

  const renderItem = (items) => {
    return(
      <TouchableOpacity>
        <Card>
          <View> 
            <Text>{items}</Text>
          </View>
        </Card>
      </TouchableOpacity>
    )

  }


  return (
    <View style={{ paddingTop: 50, flex: 1 }}>
      <Agenda
        current={todaysDate}  
        minDate={todaysDate}
        markedDates={{
            '2020-12-24': [{selected: true, marked: true, selectedColor: 'blue', Name:"hello"}],
            '2020-12-25': {marked: true},
            '2020-12-26': {marked: true, dotColor: 'red', activeOpacity: 0},
          }}
        items={items}
        renderItem={renderItem}
      />
      
    </View>
  );
}
export default Calendar;