react-native - 议程 - 动态更改选定的日期

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

晚了几年，但设法使用 refs 解决了这个问题

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)

它应该像点击日期按钮一样动画