reactjs - react native 日历

Question

import React, { useState } from "react";
import { View, Text, SafeAreaView } from "react-native";

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

const Home = () => {
    const [date, setDate] = useState("")
    const [datecolor,setDateColor]=useState("")

    const addZero = (a) => {
        if (a < 10 && a > 0) {
            return '0' + a.toString();
        } else {
            return a;
        }
    }
    const getCurrentDate = () => {
        var date = new Date().getDate();
        var month = new Date().getMonth() + 1;
        var year = new Date().getFullYear();
        return year + '-' + addZero(month) + '-' + addZero(date);//yyyy-mm-dd
    }

    const getMinDate = () => {
        var date = new Date().getDate();
        var month = new Date().getMonth() + 1;
        var year = new Date().getFullYear();
        return year + '-' + addZero(month) + '-' + addZero(date);//yyyy-mm-dd
    }
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View>
                <Calendar
                    current={getCurrentDate().toString()}
                    minDate={getMinDate().toString()}
                    maxData={'2050-01-01'}
                    monthFormat={'MMMM yyyy'}
                    onDayPress={day => {
                        setDate(day.dateString)
                        setDateColor("#000")
                    }}
                    hideArrows={false}
                    hideExtraDays={true}
                    disableMonthChange={false}
                    firstDay={1}
                    theme={{
                        todayTextColor: 'red',
                    }}
                />
                <Text style={{fontSize:20,textAlign:'center',fontSize:25,fontWeight:'bold'}}>{date}</Text>
            </View>
        </SafeAreaView>
    );
}

export default Home;

下面是我的代码

• 运行完美

• 但我希望如果我选择日历中的任何日期日期背景颜色发生变化

• 例如默认在日历中选择一个日期

  我能做什么

这是我的输出

这里我选择了20个日期，但是日历中的20个日期背景没有改变

我想要日历中的 12 个日期背景

Answer 1

您需要将名为 markedDates 的属性添加到 Calendar 组件。您可以在此处查看文档中的示例 wix/react-native-calendars

...
      <Calendar
        markedDates={{
          [date]: { selected: true, marked: true, selectedColor: 'blue' },
        }}
        current={getCurrentDate().toString()}
        minDate={getMinDate().toString()}
        maxData={'2050-01-01'}
        monthFormat={'MMMM yyyy'}
        onDayPress={(day) => {
          setDate(day.dateString);
          setDateColor('#000');
        }}
        hideArrows={false}
        hideExtraDays={true}
        disableMonthChange={false}
        firstDay={1}
        theme={{
          todayTextColor: 'red',
        }}
      />
...