React Native Calendar选中日期背景色设置及默认选中问题求助

假设你使用的是react-native-calendars（React Native生态中最常用的日历组件库），以下是针对两个需求的具体实现方案：

1. 核心实现代码 #

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

const CustomCalendar = () => {
  // 初始化默认选中日期：可以设为今日，也可指定固定日期（格式必须是YYYY-MM-DD）
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);

  // 配置日期标记样式，让选中日期和今日高亮效果对齐
  const markedDates = {
    [selectedDate]: {
      selected: true,
      selectedColor: '#00adf5', // 这里填你今日高亮的背景色，按需替换
      textColor: 'white'
    },
    // 保留今日的默认高亮样式（若不需要可删除）
    [new Date().toISOString().split('T')[0]]: {
      today: true,
      textColor: '#00adf5'
    }
  };

  return (
    <Calendar
      // 绑定日期点击事件，更新选中状态
      onDayPress={(day) => setSelectedDate(day.dateString)}
      markedDates={markedDates}
      // 全局主题配置，统一日历视觉风格
      theme={{
        selectedDayBackgroundColor: '#00adf5',
        selectedDayTextColor: 'white',
        todayTextColor: '#00adf5',
        dayTextColor: '#2d4150',
        textDisabledColor: '#d9e1e8'
      }}
    />
  );
};

export default CustomCalendar;

2. 关键逻辑说明 #

• 默认选中日期：通过useState初始化时传入目标日期字符串（必须是YYYY-MM-DD格式），组件渲染时会自动高亮该日期。
• 选中日期背景变色：利用markedDates给选中日期标记selected: true，并配置与今日一致的背景色、文字色；也可通过theme全局统一样式，避免重复设置。
• 点击更新高亮：onDayPress回调会返回点击的日期对象，提取dateString更新选中状态，触发markedDates重新渲染，实现点击后实时高亮。

3. 个性化样式扩展 #

如果需要更定制化的高亮效果（比如圆角、加粗文字），可在markedDates中添加customStyles：

[selectedDate]: {
  selected: true,
  customStyles: {
    container: {
      backgroundColor: '#00adf5',
      borderRadius: 8,
      justifyContent: 'center',
      alignItems: 'center'
    },
    text: {
      color: 'white',
      fontWeight: 'bold'
    }
  }
}

内容的提问来源于stack exchange，提问作者user19534405