Question

我无法动态更改所选日期。例如，我想在离开屏幕时将选定的日期更改为今天；我不想离开时选择今天以外的其他日子...我该怎么办？我正在使用议程。另外，当用户单击该屏幕上的某个按钮时，我想更改所选日期。如果只设置selectedDay的状态，则我的议程列表日期根本不会更改。

我现在的代码；

componentDidMount() {

    this.props.navigation.addListener('didBlur', (playload)=>{
      console.log(playload);

     this.onDayPress(Moment().format('YYYY-MM-DD').toString());
   });
}

我的议程：

<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.state.items2}
  // callback that gets called when items for a certain month should be loaded (month became visible)
  //loadItemsForMonth={}
  // callback that fires when the calendar is opened or closed
  onCalendarToggled={(calendarOpened) => {}}
  // callback that gets called on day press
  onDayPress={this.onDayPress.bind(this)}
  // callback that gets called when day changes while scrolling agenda list
  onDayChange={(day)=>{
    this.setState({day: day})
    console.log('OnDayChange: ' + day);
  }}
  // initially selected day
  //selected={ Moment().format('YYYY-MM-DD').toString()}
  //selected={'2018-02-20'}
  selected={this.state.selectedDay}
  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
  minDate={this.state.minDate}
  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
  maxDate={this.state.maxDate}
...

onDayPress方法；

onDayPress(day) {
    //console.log('Predn zamenjam selected day: ' + this.state.selectedDay);

    if(day.dateString === undefined) {

      if(day !== undefined) {
        //console.log('day: ' + day);
        this.setState({
          selectedDay: day
        });
        return true;
      }

    }

    this.setState({
      selectedDay: day.dateString
    }); 

    this.getNextThreeDays(day.dateString);
    this.getQuotes(day.dateString);
  }

环境

npm ls react-native-calendars：1.19.4
npm ls react-native：^ 0.55.4

Answer 1

晚了几年，但设法通过裁判解决了这个问题

import React, { createRef } from 'react';

const agendaRef = createRef();

呈现议程时，请包含参考

<Agenda
  ref={agendaRef}
  ...
/>

对于按钮的onPress功能，包括对chooseDay的调用

const date = '2020-10-01' // the date you want to go to
agendaRef.current.chooseDay(date)

它应该像点击日期按钮一样进行动画处理

议程-动态更改所选日期

环境

1 个答案: