如何为react-native-calendars的Agenda组件自定义周末日期文字颜色

要实现Agenda组件中周六、周日日期文字设为红色，其余日期黑色，直接通过theme的textSectionTitleColor函数无法生效（该属性在Agenda组件中不支持动态接收date参数），需要通过自定义section header渲染来实现，具体步骤如下：

1. 自定义renderSectionHeader方法 #

在Agenda组件中传入renderSectionHeader属性，手动判断日期的星期数，设置对应文字颜色：

import React from 'react';
import { View, Text } from 'react-native';
import { Agenda } from 'react-native-calendars';
import ColorStyles from './你的ColorStyles路径'; // 替换为实际路径

const YourComponent = () => {
  // 保留原有theme配置，移除无效的textSectionTitleColor函数
  const theme = {
    selectedDayBackgroundColor: ColorStyles.activeColor,
    textDayFontFamily: "Quicksand-Medium",
    textMonthFontFamily: "Quicksand-Medium",
    textDayHeaderFontFamily: "Quicksand-Bold",
    textDayFontSize: 16,
    textDayHeaderFontSize: 16,
    todayTextColor: ColorStyles.activeColor,
    textDayColor: "#000",
    textMonthColor: "#000",
    textYearColor: "#000", 
  };

  // 自定义section header渲染函数
  const renderCustomSectionHeader = (section) => {
    const day = new Date(section.date.timestamp).getDay();
    // 判断是否为周六(6)或周日(0)，设置对应颜色
    const textColor = (day === 0 || day === 6) ? ColorStyles.activeColor : '#000';
    
    // 参考默认section header样式，保持视觉一致性
    return (
      <View style={{ paddingVertical: 8, paddingHorizontal: 16, backgroundColor: '#ffffff' }}>
        <Text 
          style={{ 
            color: textColor,
            fontFamily: theme.textDayFontFamily,
            fontSize: theme.textDayFontSize
          }}
        >
          {section.title}
        </Text>
      </View>
    );
  };

  return (
    <Agenda
      // 填入你的其他配置项（如items、selected等）
      theme={theme}
      renderSectionHeader={renderCustomSectionHeader}
    />
  );
};

export default YourComponent;

2. 关键说明 #

• Agenda组件的theme配置中，textSectionTitleColor仅支持静态颜色值，不支持像Calendar组件那样传入动态计算的函数，因此必须通过自定义渲染实现动态颜色逻辑。
• 自定义渲染时，可以参考Agenda默认的section header样式（内边距、背景色等），确保与原有UI风格一致。

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