React Native Calendars：如何基于用户选择动态更新日历当日外观

我使用react-native-calendars包实现日历展示，需求是让用户从列表选择表情后，日历的当日能动态显示该表情。我尝试通过Calendar组件的getDayComponent属性实现该功能，但用户选择不同表情时，日历当日外观无变化，无法完成更新。相关代码如下：

/**
 * Render custom day component for the calendar.
 * Displays the selected emoji on the current day if an emoji is selected.
 * Otherwise, displays the default day text.
 * @param {object} date - The date object containing date information.
 * @returns {JSX.Element} - The custom day component.
 */
const renderCustomDay = (date) => {
  if (date.dateString === currentDate && currentEmoji) {
    return (
      <View style={styles.customDayContainer}>
        <MaterialIcons name={currentEmoji.name} size={24} color={currentEmoji.color} />
      </View>
    );
  }
  return date.day.toString();
};

/**
 * Get marked dates for the calendar.
 * Marks the current date with custom styles if an emoji is selected.
 * @returns {object} - Object containing marked dates and their custom styles.
 */
const getMarkedDates = () => {
  const markedDates = {};
  if (currentEmoji) {
    markedDates[currentDate] = {
      customStyles: {
        container: { backgroundColor: 'transparent' },
        text: { display: 'none' }
      }
    };
  }
  return markedDates;
};

return (
    <SafeAreaView style={styles.container}>
      <Calendar 
        markingType={'custom'}
        markedDates={getMarkedDates()}
        getDayComponent={(date) => renderCustomDay(date)}
      />
      <View style={styles.mainContainer}>
        <FlatList
          data={dataEmotions}
          renderItem={renderEmotions}
          keyExtractor={(item) => item.id.toString()}
          numColumns={1}
          contentContainerStyle={styles.flatListContainer}
        />
      </View>
    </SafeAreaView>
  )

问题核心是react-native-calendars的Calendar组件不会自动监听currentEmoji的变化来触发自定义日期组件的重渲染，需要通过以下调整解决：

1. 确保状态变量驱动更新
   确认currentEmoji和currentDate是用React的useState声明的状态变量，而非普通变量，这样状态变化时才会触发组件重渲染：

   import { useState } from 'react';
   import moment from 'moment'; // 或用原生Date处理日期格式
   
   const [currentEmoji, setCurrentEmoji] = useState(null);
   const [currentDate, setCurrentDate] = useState(moment().format('YYYY-MM-DD'));
   

2. 让Calendar感知状态变化
   Calendar组件对markedDates的变化更敏感，给markedDates加入与currentEmoji绑定的唯一标识，确保状态更新时markedDates的引用发生变化：

   const getMarkedDates = () => {
     const markedDates = {};
     if (currentEmoji) {
       markedDates[currentDate] = {
         customStyles: {
           container: { backgroundColor: 'transparent' },
           text: { display: 'none' }
         },
         emojiId: currentEmoji.id // 加入表情唯一ID，触发Calendar重渲染
       };
     }
     return markedDates;
   };
   

3. 优化自定义日期组件的渲染
   给自定义日期组件添加唯一key，帮助React识别组件变化，同时确保渲染逻辑的正确性：

   const renderCustomDay = (date) => {
     if (date.dateString === currentDate && currentEmoji) {
       return (
         <View key={`emoji-day-${currentEmoji.id}`} style={styles.customDayContainer}>
           <MaterialIcons name={currentEmoji.name} size={24} color={currentEmoji.color} />
         </View>
       );
     }
     return <Text key={`default-day-${date.dateString}`}>{date.day.toString()}</Text>;
   };
   

4. 检查表情选择的回调逻辑
   确认renderEmotions中的点击事件正确更新currentEmoji状态：

   const renderEmotions = ({ item }) => (
     <TouchableOpacity onPress={() => setCurrentEmoji(item)}>
       <MaterialIcons name={item.name} size={32} color={item.color} />
     </TouchableOpacity>
   );
   

完成以上调整后，用户选择不同表情时，currentEmoji状态更新会触发markedDates变化，Calendar组件会重新渲染当日的自定义组件，实现表情的动态更新。

内容的提问来源于stack exchange，提问作者Thành H. Ma