React Native Expo日程日历：实现选中日期添加事件功能

我正在使用React Native Expo与JavaScript开发应用，已成功展示react-native-calendars的Agenda日历组件，但尚未实现为选中日期添加事件的功能。需求是用户点击按钮后，可向选中日期添加事件。

修改后的完整代码 #

import React, { useState } from "react";
import { Alert, StyleSheet, Text, View, TouchableOpacity } from "react-native";
import { Agenda } from "react-native-calendars";
import { Card } from "react-native-paper";

const timeToString = (time) => {
  const date = new Date(time);
  return date.toISOString().split("T")[0];
};

const CalendarComponent = () => {
  const [items, setItems] = useState({});
  const [selectedDate, setSelectedDate] = useState(null);

  const loadItems = (day) => {
    setTimeout(() => {
      const newItems = { ...items };
      for (let i = -15; i < 85; i++) {
        const time = day.timestamp + i * 24 * 60 * 60 * 1000;
        const strTime = timeToString(time);
        if (!newItems[strTime]) {
          newItems[strTime] = [];
        }
      }
      setItems(newItems);
    }, 1000);
  };

  const renderEmptyDate = () => {
    return (
      <View style={styles.emptyDate}>
        <Text>暂无日程</Text>
      </View>
    );
  };

  const renderItem = (item) => {
    return (
      <TouchableOpacity style={styles.item}>
        <Card>
          <Card.Content>
            <Text>{item.name}</Text>
          </Card.Content>
        </Card>
      </TouchableOpacity>
    );
  };

  const addEvent = () => {
    if (!selectedDate) {
      Alert.alert("提示", "请先选择一个日期");
      return;
    }
    Alert.prompt(
      "添加日程",
      "输入日程名称",
      [
        { text: "取消", style: "cancel" },
        {
          text: "确定",
          onPress: (eventName) => {
            if (eventName.trim()) {
              setItems(prevItems => {
                const updatedItems = { ...prevItems };
                if (!updatedItems[selectedDate]) {
                  updatedItems[selectedDate] = [];
                }
                updatedItems[selectedDate].push({ name: eventName });
                return updatedItems;
              });
            }
          }
        }
      ]
    );
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.addButton} onPress={addEvent}>
        <Text style={styles.addButtonText}>添加日程</Text>
      </TouchableOpacity>
      <Agenda
        items={items}
        loadItemsForMonth={loadItems}
        renderItem={renderItem}
        renderEmptyDate={renderEmptyDate}
        showClosingKnob={true}
        onDayPress={(day) => setSelectedDate(day.dateString)}
        selected={selectedDate}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: "white",
    flex: 1,
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
    marginTop: 17,
  },
  emptyDate: {
    height: 15,
    flex: 1,
    paddingTop: 30,
    alignItems: "center",
  },
  addButton: {
    backgroundColor: "#2196F3",
    padding: 15,
    alignItems: "center",
    margin: 10,
    borderRadius: 8,
  },
  addButtonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "bold",
  },
});

export default CalendarComponent;

关键改动说明 #

• 新增selectedDate状态，用于记录用户选中的日期，通过Agenda的onDayPress回调更新
• 添加顶部的"添加日程"按钮，点击触发弹窗输入事件名称
• 实现addEvent函数：先判断是否选中日期，再通过Alert.prompt获取输入，最后更新日程数据（确保不直接修改原状态对象）
• 优化loadItems函数，避免直接修改原items状态，改用展开运算符创建新对象
• 给Agenda组件添加selected属性，高亮显示选中的日期

内容的提问来源于stack exchange，提问作者SmokedPorcupine