0

我在我的代码中使用来自 wix/react-native-calendars 的议程。问题在于它没有按照预期在屏幕上显示的方式显示任何项目。我不知道我哪里错了。我一直在试图找出解决方案，但似乎没有任何帮助。我是 React 和 React Native 的新手，所以任何指导都将受到高度赞赏。

请查看下面的代码以及显示问题的屏幕截图。

import React, { useState } from "react";
import {
  Alert,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Keyboard,
  Modal,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Agenda } from "react-native-calendars";
import colors from "../config/colors";
import NewAppointment from "./NewAppointment";

export default function AppointmentList({ navigation }) {
  const [modalOpen, setModalOpen] = useState(false);
  const [appointments, setAppointments] = useState(() => {
    [
      {
        "2021-03-11": [
          {
            name: "Jeevan More",
            start: "10:00 AM",
            end: "10:30 AM",
            type: "Follow Up",
          },
          {
            name: "Seema More",
            start: "10:30 AM",
            end: "11:30 AM",
            type: "New Consult",
          },
        ],
      },
      {
        "2021-03-12": [
          {
            name: "Madhura Utekar",
            start: "10:00 AM",
            end: "11:00 AM",
            type: "Accute",
          },
          {
            name: "Aditya Utekar",
            start: "12:00 PM",
            end: "12:30 PM",
            type: "Follow Up",
          },
        ],
      },
    ];
  });

  const addAppointment = (appointment) => {
    appointment.id = Math.random().toString();
    setAppointments((currentAppointments) => {
      return [appointment, ...currentAppointments];
    });
    setModalOpen(false);
  };

  const renderItem = (item) => {
    return (
      <TouchableOpacity
        style={[styles.item, { height: item.height }]}
        onPress={() => Alert.alert(item.name)}
      >
        <Text style={styles.timing}>
          {item.start} - {item.end}
        </Text>
        <Text style={styles.name}>{item.name}</Text>
        <Text style={styles.type}>{item.type}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <>
      <Modal visible={modalOpen} animationType="slide">
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <View style={styles.modalContent}>
            <MaterialCommunityIcons
              name="chevron-down"
              size={24}
              color="#424242"
              onPress={() => setModalOpen(false)}
            />
            <NewAppointment addAppointment={addAppointment} />
          </View>
        </TouchableWithoutFeedback>
      </Modal>
      <Agenda
        items={appointments}
        renderItem={(item) => {
          return renderItem(item);
        }}
        selected={"2021-03-11"}
        //pastScrollRange={0}
        //futureScrollRange={0}
        //renderEmptyData={renderEmptyItem}
        //renderEmptyDate={renderEmptyDate}
        //theme={calendarTheme}
      />
      <View style={styles.addbutton}>
        <TouchableOpacity
          onPress={() => setModalOpen(true)}
          style={{
            borderWidth: 2,
            borderColor: "rgba(0,0,0,0.1)",
            alignItems: "center",
            justifyContent: "center",
            width: 50,
            height: 50,
            backgroundColor: "dodgerblue",
            borderRadius: 50,
            marginBottom: 10,
          }}
        >
          <MaterialCommunityIcons name="plus" size={20} color="#fff" />
        </TouchableOpacity>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  addbutton: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  item: {
    backgroundColor: "white",
    flex: 1,
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
    marginTop: 17,
  },
  name: {
    fontSize: 18,
    fontWeight: "600",
  },
  timing: {
    color: colors.dark,
  },
  type: {
    color: "#03A9F4",
  },
  emptyDate: {
    height: 15,
    flex: 1,
    paddingTop: 30,
  },
  modalContent: {
    flex: 1,
    marginTop: 20,
    alignItems: "center",
  },
});

截屏

4

1 回答 1

0

议程项目应收到如下所示的对象。您提供了一个数组，这就是它不显示项目的原因。尝试如下；

{
  "2021-03-11": [{
      name: "Jeevan More",
      start: "10:00 AM",
      end: "10:30 AM",
      type: "Follow Up",
    },
    {
      name: "Seema More",
      start: "10:30 AM",
      end: "11:30 AM",
      type: "New Consult",
    },
  ],
  "2021-03-12": [{
      name: "Madhura Utekar",
      start: "10:00 AM",
      end: "11:00 AM",
      type: "Accute",
    },
    {
      name: "Aditya Utekar",
      start: "12:00 PM",
      end: "12:30 PM",
      type: "Follow Up",
    },
  ]
}

然后，您还必须相应地修改您的 addAppointment 函数。

于 2021-03-11T10:59:58.100 回答