react-native-calendars 跳转到选定的月份

Question

我正在使用react-native-calendars。 我有一个

<Calendar/>

组件。

我已经阅读了文档大约十几次，并且找不到比

current

属性更好的更改月份的属性，它初始化日历的视图。例如，如果我设置

current={"2014-01-01"}

，我将看到 2014 年的日历，即 1 月 1 日。问题是我无法重新渲染此道具。

我也尝试使用

key

道具，但它不会更改日期。 Ref 也不是一个选项，我有自定义的

<CalendarHeader/>

package.json

 "react": "17.0.2",
 "react-native": "0.66.4",
 "react-native-calendars": "1.1274.0"

日历.tsx

const CalendarScreen = () => {
  const [current, setCurrent] = useState('2020-01-01');

return (
        <Calendar
          current={current}
          customHeader={CalendarHeaderHandler}
          style={styles.calendar}
        />
        <TouchableOpacity onPress={() => setCurrent('2021-01-01')}>
            <Text>2021</Text>
        </TouchableOpacity>
 )};

Answer 1

通过添加道具

key

和

current

解决了这个问题

Prop

key

触发重新渲染

  const CalendarScreen = () => {
      const [current, setCurrent] = useState('2020-01-01');

  return(
        <Calendar
          current={current}
          key={current}
          customHeader={CalendarHeaderHandler}
          style={styles.calendar}
        />
        <TouchableOpacity onPress={() => setCurrent('2021-01-01')}>
            <Text>2021</Text>
        </TouchableOpacity>
   )};

Answer 2

最新版本，我们不能再使用ref了，新的解决方案是

创建状态

  const [initialDate, setInitialDate] = useState(moment().format(CALENDAR_DATE_FORMAT));

然后

<Calendar
              ...
              initialDate={initialDate}/>

创建一些方法来处理加/减月份

const onGoNextMonth = () => {
    setInitialDate(initialDate => moment(initialDate).add(1, 'month').format(CALENDAR_DATE_FORMAT));
  };

  const onGoBackMonth = () => {
    setInitialDate(initialDate =>
      moment(initialDate).subtract(1, 'month').format(CALENDAR_DATE_FORMAT),
    );
  };