react-native - React Native Calendar Agenda Week View 无法正确呈现

Question

我开始为我的应用程序使用 React Native 日历。我在其中一个屏幕中使用了议程。然而，在选择日期时有一个奇怪的问题。我已经设置了过去滚动范围和 future 滚动范围。问题是每当我从日历的第一个月中选择任何日期时，它都会显示下个月的最后一周。例如，如果 2017 年 1 月是日历中的第一个月，则在选择任何日期后，它会显示 2017 年 2 月的最后一周。同样，当我选择日历中最后一个月的任何日期时，它会显示同月的第一周。我一直试图找出解决方案，但似乎没有任何帮助。任何指导将不胜感激。

请看下面的截图。在下面的屏幕截图中，2017 年 12 月是日历中的第一个月，2021 年 12 月是日历中的最后一个月。




这是我的代码。

import React, { useState, useEffect } from "react";
import { View, Text, Image, TouchableOpacity, SafeAreaView, StyleSheet, Platform } from "react-native";
import { Agenda } from "react-native-calendars";
import Toast from "react-native-simple-toast";
import moment from "moment";
import "../../../Utils/Globals";
import { SERVICES_FOR_DATE_URL, CLIENT_ID_KEY } from "../../../Config/Routes";
import { requestData } from "../../../Api/ApiRequests";
import ServiceEvent from "./ServiceEvent";
//import { checkLocationPermission, requestLocationPermission, getDistance } from "../../../Location/LocationManager";
import Geolocation from "react-native-geolocation-service";
import Icon from "react-native-vector-icons/FontAwesome";

let watchId = "";

const ServicesCalendarScreen = (props) => {

    //let date = moment();
    //date = moment().format("MMMM YYYY");
    //date = moment().month() + moment().year();
    //Toast.show(""+date, Toast.LONG);

    //events state hook for selected day events
    const [events, setEvents] = useState(null);

    //set selected month and year
    const [date, setDate] = useState(moment().format("MMMM YYYY"));

    //hook for setting selected date to pass to onRefresh prop of agenda to refresh the selected date contents
    const [dateToRefresh, setDateToRefresh] = useState(moment().format("YYYY-MM-DD"));

    const getSelectedDayEvents = (date) => {

        let serviceDate = moment(date);
        serviceDate = serviceDate.format("DD/MM/YYYY");

        const data = { ClientId : CLIENT_ID, ServiceDate : serviceDate };

        //returned result with fetch api
        requestData(PROVIDER_URL + SERVICES_FOR_DATE_URL, data).then((result) => {
            console.log(result);
            if (result.status == "Successful") {
                if (result.data != "") {
                    //changing the received result object so that calendar can view the event on selected date
                    let modifiedData = { [date] : result.data };
                    setEvents(modifiedData);
                    console.log(modifiedData);
                    //to change the month and year on top of agenda
                    //setDate(moment(date).format("MMMM YYYY"));
                }
                else {
                    let modifiedData = { [date] : result.data };
                    setEvents(modifiedData);
                }
            }
            else {
                Toast.show(result.message ? result.message : result, Toast.SHORT);
            }

        })
        .catch((error) => {
            console.log(error);
        });
    }

    //this condition is implemented when we need to refresh data when we appear from another screen
    if (typeof props.navigation.state.params !== "undefined") {
        const refreshData = props.navigation.state.params.refreshData;
        const selectedDate = props.navigation.state.params.selectedDate;
        props.navigation.state.params = undefined;
        let date = selectedDate.replace(/\//g, "-");
        date = moment(selectedDate, "DD-MM-YYYY").format("YYYY-MM-DD");
        //date = date.format("YYYY-MM-DD");
        getSelectedDayEvents(date);
        // if (refreshData) {
        //     let currentDate = moment();
        //     currentDate = currentDate.format("YYYY-MM-DD");
        //     getSelectedDayEvents(currentDate);
        // }
    }

    //getting the service date to populate the selected day calendar events
    useEffect(() => {

        let currentDate = moment();
        currentDate = currentDate.format("YYYY-MM-DD");
        getSelectedDayEvents(currentDate);

        // if (Platform.OS === "android") {
        //     //checking the status if user has location permission enabled, if not then show the permission popup to user
        //     requestLocationPermission().then((status) => {
        //         console.log(status);
        //         if (status === "granted") {
        //             //getting location response through promise from another file
        //             // const watchID = await getPosition().then((position) => {
        //             //     console.log(position);
        //             // })
        //             // .catch((error) => {
        //             //     console.log(error);
        //             // });
        //             // console.log(watchID);

        //             //options for location
        //             const options = {
        //                 enableHighAccuracy: true, 
        //                 timeout : 15000, 
        //                 interval : 30000
        //             };

        //             //for iOS only
        //             if (Platform.OS === "ios")
        //                 setRNConfiguration(options);

        //             //continuously get location after every 30 seconds
        //             watchID = Geolocation.watchPosition((position) => {
        //                 const currentLat = position.coords.latitude;
        //                 const currentLng = position.coords.longitude;
        //                 const residentLat = -37.901639;
        //                 const residentLng = 145.054707;
        //                 Toast.show("Location Updated", Toast.LONG);
        //                 getDistance(currentLat, currentLng, residentLat, residentLng).then((data) => {
        //                     console.log(data);
        //                 })
        //                 .catch((error) => {
        //                     console.log(error);
        //                 });
        //             },
        //             (error) => {
        //                 console.log(error);
        //             },
        //             options);
        //         }
        //         else {
        //             console.log("No permission allowed for accessing location");
        //         }

        //     })
        //     .catch((error) => {
        //         console.log(error);
        //     });
        // }
        // else {

        // }
    }, []);

    // useEffect(() => {
    //     checkLocationPermission().then((permissionStatus) => {
    //         switch (permissionStatus) {
    //             case "granted":
    //                 break;
    //             case "denied":
    //                 break;
    //             case "blocked":
    //                 break;
    //             case "unavailable":
    //                 break;
    //         }
    //     })
    //     .catch((error) => {
    //         console.log(error);
    //     });
    // });

    return (
        <View style = {{ flex : 1 }}>
            <View style = { styles.dateViewStyle }>
                <TouchableOpacity 
                    style = { styles.dateButtonStyle }
                    //onPress = {() => openCalendar ? setOpenCalendar(false) : setOpenCalendar(true) }
                    >
                    <Text style = { styles.dateStyle }>{ date }</Text>
                </TouchableOpacity>
            </View>
            <Agenda items = { events } /*shouldOpenCalendar = { openCalendar }*/
                // Enable or disable scrolling of calendar list
                scrollEnabled = { false }
                // Max amount of months allowed to scroll to the past. Default = 50
                pastScrollRange = { 12 }
                // Max amount of months allowed to scroll to the future. Default = 50
                futureScrollRange = { 12 }
                // callback that gets called when items for a certain month should be loaded (month became visible)
                // loadItemsForMonth={(month) => {
                //         let currentDate = moment();
                //         currentDate = currentDate.format("YYYY-MM-DD");
                //         if (currentDate == month.dateString) {
                //             getSelectedDayEvents(month.dateString);
                //         }
                //         console.log(currentDate);
                //     }
                // }
                // callback that fires when the calendar is opened or closed
                onCalendarToggled = {(calendarOpened) => calendarOpened ? setDate("") : null }
                // callback that gets called on day press
                onDayPress={(day)=>{
                        getSelectedDayEvents(day.dateString);
                        //to change the month and year on top of agenda
                        setDate(moment(day.dateString).format("MMMM YYYY"));
                        //set the date in case onRefresh is executed
                        setDateToRefresh(day.dateString);
                    }
                }
                // callback that gets called when day changes while scrolling agenda list
                onDayChange={(day)=>{
                        console.log('day changed')
                    }
                }
                // specify how each item should be rendered in agenda
                renderItem={(item, firstItemInDay) => {
                        return (<ServiceEvent eventDetails = { item } navigation = { props.navigation } />);
                    }
                }
                // specify how each date should be rendered. day can be undefined if the item is not first in that day.
                // renderDay={(day, item) => {
                //         return (<View><Text>Text</Text></View>);
                //     }
                // }
                // specify how empty date content with no items should be rendered
                renderEmptyDate = {() => {
                    return (
                        <View style = { styles.viewStyle }>
                            <Icon name = "exclamation-triangle" size = { 30 } color = "#2079B3"/>
                            <Text style = { styles.textStyle }>No services on this date</Text>
                        </View>
                    );
                }}
                // specify how agenda knob should look like
                renderKnob={() => { 
                    return (
                        <TouchableOpacity /*onPress = {() => openCalendar ? setOpenCalendar(false) : setOpenCalendar(true)}*/>
                            <Icon name = "chevron-down" size = { 20 } color = "#2079B3" />
                        </TouchableOpacity>
                    ); 
                }}
                // specify what should be rendered instead of ActivityIndicator
                // renderEmptyData = {() => {
                //     return (<View><Text>No service on this date</Text></View>);
                // }}
                // specify your item comparison function for increased performance
                rowHasChanged={(r1, r2) => {return r1 !== r2;}}

                // By default, agenda dates are marked if they have at least one item, but you can override this if needed
                // markedDates={{
                //     '2019-11-22': {selected: true, marked: true},
                //     '2019-11-23': {marked: true},
                //     '2019-11-24': {disabled: true}
                // }}

                // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
                onRefresh={() => getSelectedDayEvents(dateToRefresh)}

                //styling agenda calendar view
                theme = {{ 
                    textDayFontSize: 16,
                    textMonthFontSize: 20,
                    textDayHeaderFontSize: 16
                }} 

            />
        </View>

    );
}

const styles = StyleSheet.create({
    dateViewStyle : {
        flexDirection : "row",
        justifyContent : "center",
        height : "auto"
    },
    dateStyle : {
        color : "#2079B3",
        fontSize : 18,
        padding : 10,
        margin : 5,
        borderRadius: 5
    },
    viewStyle : {
        flexDirection : "row",
        justifyContent : "center",
        padding : 5,
        marginTop : 30,
        height : 50
    },
    textStyle : {
        fontSize : 18,
        margin : 5
    }
});

export default ServicesCalendarScreen;

Answer 1

你可以做两件事:

更新版本 "react-native-calendars": "1.220.0"
日历折叠时标题的奇怪滚动行为已在此处修复。

您可以为主题设置样式，就像我为 iOS 和 Android 分别处理的情况一样:

'stylesheet.calendar.header': { week: { marginTop: Platform.OS=='ios'?6:2, flexDirection: 'row', justifyContent: 'space-between' } }

例如:

<Agenda
theme={{
'stylesheet.calendar.header': { week: { marginTop: Platform.OS=='ios'?6:2, flexDirection: 'row', justifyContent: 'space-between' } }
}}>

供引用我的议程组件:

<Agenda
                    // the list of items that have to be displayed in agenda. If you want to render item as empty date
                    // the value of date key kas to be an empty array []. If there exists no value for date key it is
                    // considered that the date in question is not yet loaded
                    items={this.props.planList}
                    renderItem={(item, firstItemInDay) => this.renderItem(item, firstItemInDay)}
                    renderDay={(day, item) =>this.renderItemDay(day, item)}
                    renderEmptyDate={() =>this.renderEmptyDate()}
                    rowHasChanged={(r1, r2) =>this.rowHasChanged(r1,r2)}
                    onDayPress={this.onDaySelected.bind(this)}
                    minDate={this.props.minDate? this.props.minDate : Moment(today).format('YYYY-MM-DD')}
                    maxDate ={this.props.maxDate? this.props.maxDate : Moment(today).format('YYYY-MM-DD')}
                    renderKnob={() => {return (<View style={{height:14, padding:4}}><View style={{height:'100%', width:40, backgroundColor:'#DCDCDC', borderRadius:4,
                        borderWidth: 1,
                        borderColor: '#DCDCDC'}} /></View>);}}
                    markedDates={this.props.markedDates}
                    theme={{
                        backgroundColor: '#ffffff',
                        calendarBackground: '#f8f5f0',
                        selectedDayBackgroundColor: '#E0D2BC',
                        selectedDayTextColor: '#000000',
                        todayTextColor: '#000000',
                        textDisabledColor: '#888888',
                        dayTextColor: '#000000',
                        agendaKnobColor: '#DCDCDC',
                        dotColor: COLORS.GREEN,
                        selectedDotColor: COLORS.PRIMARY,
                        'stylesheet.calendar.header': { week: { marginTop: Platform.OS=='ios'?6:2, flexDirection: 'row', justifyContent: 'space-between' } }

                    }}

                />