React Native Calendars组件主题变更不生效问题求助

你的推测是对的，CalendarList组件没有感知到theme的变化，因此没有触发重渲染。可以通过以下几种方法强制组件更新：

方法一：使用主题标识作为组件key #

利用React的key机制，当key变化时组件会重新挂载，从而应用新的主题样式。

1. 首先在Statistics组件中从PreferencesContext获取主题切换状态：

import { useContext } from 'react';
import PreferencesContext from '../path/to/PreferencesContext'; // 替换为你的Context实际路径

export default function Statistics({ navigation }) {
  const theme = useTheme();
  const { isThemeDark } = useContext(PreferencesContext); // 获取主题切换状态

  return (
    <SafeAreaView>
      <CalendarList
        key={isThemeDark} // 添加key，主题切换时key变化触发组件重挂载
        firstDay={1}
        pastScrollRange={1}
        futureScrollRange={1}
        scrollEnabled
        showScrollIndicator={false}
        theme={{
          backgroundColor: theme.colors.background,
          calendarBackground: theme.colors.background, 
          textSectionTitleColor: theme.colors.onBackground,
          selectedDayBackgroundColor: 'transparent',
          selectedDayTextColor: theme.colors.onBackground,
          todayTextColor: theme.colors.onBackground,
          todayBackgroundColor: theme.colors.primary,
          dayTextColor: theme.colors.onBackground, // 建议替换固定gray，跟随主题文本色
          dotColor: theme.colors.primary,
          selectedDotColor: theme.colors.onBackground,
          monthTextColor: theme.colors.onBackground,
        }}
      />
    </SafeAreaView>
  );
}

方法二：监听theme变化触发强制更新 #

通过useEffect监听theme的变化，手动触发组件重渲染：

import { useState, useEffect } from 'react';

export default function Statistics({ navigation }) {
  const theme = useTheme();
  const [updateTrigger, setUpdateTrigger] = useState(0);

  // 监听theme变化，更新触发器状态
  useEffect(() => {
    setUpdateTrigger(prev => prev + 1);
  }, [theme]);

  return (
    <SafeAreaView>
      <CalendarList
        key={updateTrigger} // 用触发器状态作为key，触发重渲染
        // 其他属性与theme配置保持不变
      />
    </SafeAreaView>
  );
}

额外优化建议 #

你代码中dayTextColor使用了固定值gray，建议改为theme.colors.onBackground的对应变体（比如在暗黑模式下配置浅灰、亮色模式下配置深灰），确保日历的所有文本颜色都能随主题统一变化。

内容的提问来源于stack exchange，提问作者Lavínia Beghini