react-native-calendars 如何标记选定的日期

react-native-calendars 是一个高度可定制的日历组件库，允许您创建类似日历的 UI，以及标记特定日期以进行显示。

在本文中，我们将讨论如何使用 react-native-calendars 中的 markedDates 属性来标记选定的日期，并将其高亮显示。

步骤 1 - 安装 react-native-calendars

首先，确保已安装 react-native-calendars 组件库。您可以使用以下命令进行安装：

npm install react-native-calendars --save

步骤 2 - 导入日历组件

在您的 React Native 应用中，导入 react-native-calendars 组件：

import { Calendar } from 'react-native-calendars';

步骤 3 - 标记选定的日期

我们将使用 Calendar 组件的 markedDates 属性来标记选定的日期。

import React, { Component } from 'react';
import { Calendar } from 'react-native-calendars';

class MyCalendar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedDate: '' //用于存储用户选定的日期
    };
  }

  onDayPress = (date) => {
    this.setState({
      selectedDate: date.dateString
    });
  }

  render() {
    //在这里定义要高亮显示的日期
    const markedDates = {};
    markedDates[this.state.selectedDate] = { selected: true };

    return (
      <Calendar
        onDayPress={this.onDayPress}
        markedDates={markedDates}
      />
    );
  }
}

export default MyCalendar;

如您所见，我们在 MyCalendar 类的构造函数中定义了一个 selectedDate 状态。当用户按下日期时，我们将选定的日期的字符串存储在该状态中。

在 render 方法中，我们定义了要高亮显示的日期，并将其作为 markedDates 属性传递到 Calendar 组件中。

请注意，我们使用了传递给 onDayPress 回调函数的 date 参数，该参数包含关于选定日期的详细信息。

结论

通过使用 markedDates 属性，我们可以轻松地在 react-native-calendars 组件中标记选定的日期并对其进行高亮显示。这是一种非常有用的功能，可用于各种类型的 React Native 应用程序。