React Native Calendar：如何根据用户选择动态更改当天的外观？

Question

这是我在 StackOverFlow 上的第一个问题。我正在使用react-native-calendars 包来显示日历。我希望允许用户从列表中选择表情符号，然后在日历中动态显示当天的表情符号。

我尝试通过使用日历组件的 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>
  )

完整代码链接

我希望用户从列表中选择表情符号后立即更新日历中当天的外观。有人可以指导我如何实现此功能吗？谢谢！！！

Answer 1

我不知道😂😂😂我不明白你在说什么😐