在 React Native 日历中突出显示按下（选定）的日期答案

【问题标题】：Highlight pressed(selected) date in React Native Calendars在 React Native 日历中突出显示按下（选定）的日期
【发布时间】：2020-04-23 04:40:24
【问题描述】：

在我拥有的项目中，我使用了 react-native-calendars 库。目前，我可以通过 onPress 获取日期。但问题是如何突出该日期。逻辑：当用户按下日期时，它应该以任何颜色突出显示。主要原因是将所选日期与其余日期区分开来。这是来源code

这是我的代码的 sn-p，它负责获取当前日期：

state={
  selectedDate: '',
}

const getSelectedDayEvents = (date) => {
    let serviceDate = moment(date);
    serviceDate = serviceDate.format("DD.MM.YYYY");
    this.setState({selectedDate: serviceDate});
};

【问题讨论】：

标签： javascript reactjs react-native highlight

【解决方案1】：

According to the document 您需要使用markedDates={} 来显示突出显示的日期。

<Calendar
  markedDates={{
    '2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
    '2012-05-17': {marked: true},
    '2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
    '2012-05-19': {disabled: true, disableTouchEvent: true}
  }}
/>

编辑

将markedDates 添加到初始状态。

state = {
    selectedDate: "",
    markedDates: {}
};

更改 getSelectedDayEvents 函数以创建 markedDates 对象并将其分配给状态。

getSelectedDayEvents = date => {
    let markedDates = {};
    markedDates[date] = { selected: true, color: '#00B0BF', textColor: '#FFFFFF' };
    let serviceDate = moment(date);
    serviceDate = serviceDate.format("DD.MM.YYYY");
    this.setState({
        selectedDate: serviceDate,
        markedDates: markedDates
    });
};

更改日历组件以接受markedDates

<Calendar
  style={{ height: 300, width: "90%", justifyContent: "center" }}
  theme={{
    backgroundColor: "#ffffff",
    calendarBackground: "#ffffff",
    todayTextColor: "#57B9BB",
    dayTextColor: "#222222",
    textDisabledColor: "#d9e1e8",
    monthTextColor: "#57B9BB",
    arrowColor: "#57B9BB",
    textDayFontWeight: "300",
    textMonthFontWeight: "bold",
    textDayHeaderFontWeight: "500",
    textDayFontSize: 16,
    textMonthFontSize: 18,
    selectedDayBackgroundColor: "#57B9BB",
    selectedDayTextColor: "white",
    textDayHeaderFontSize: 8
  }}
  minDate={"1996-05-10"}
  maxDate={"2030-05-30"}
  monthFormat={"MMMM yyyy "}
  markedDates={this.state.markedDates}
  scrollEnabled={true}
  horizontal={true}
  showScrollIndicator={true}
  disableMonthChange={true}
  onDayPress={day => {
    getSelectedDayEvents(day.dateString);
  }}
/>

如果您有任何面团，请随时询问。希望这会对你有所帮助。

【讨论】：

是的，我是从文档中得到的，问题是如何实现动态颜色变化？ snack.expo.io/Syxvr4klU看看，我已经做了，但是是静态的
@JasurKurbanov 我根据您的要求更改了答案。

【解决方案2】：

<Calendar
minDate={this.state.date}
onDayPress={(day) =>  this.setState({selected_date: day.dateString})}
renderArrow={(direction) =>  direction == 'left' ? <IconContainer iconObject={LEFT_ICON}  /> : <IconContainer iconObject={RIGHT_ICON}  />}
markedDates={{
  [this.state.selected_date]: {
    selected: true,
    disableTouchEvent: true,
    selectedColor: '#F1EFFE',
    selectedTextColor: '#7954FA',
  },
}}
theme={{
  todayTextColor: '#7954FA',
'stylesheet.calendar.header': {
  dayHeader:{
    color:'#616061',
    fontWeight:'bold'
  }
}
}}
/>

状态：--

state={
    date: moment().format("YYYY-MM-DD"),
    selected_date:null,
  }

【讨论】：