如何在react-native日历中渲染自定义文本

Question

我现在有用于react-native的lib react-native-calendars

在此输入图像描述 我想每天添加文本或表情符号（如果存在）

import React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import { Calendar, Agenda, Day } from 'react-native-calendars';

export default function App() {
  const markedDates = {
    '2024-05-10': { marked: true, dotColor: 'red', selected: true, selectedColor: 'blue', customText: '🔥' },
    '2024-05-11': { marked: true, dotColor: 'green', selected: true, selectedColor: 'orange', customText: '👌' },
  };

  const renderCustomDay = (date, item) => {
    const additionalText = item.customText ? item.customText : 'empty'; // Your custom text
    return (
      <View>
        <Text>{date.day}</Text>
        <Text>{additionalText}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <Agenda
        markedDates={markedDates}
        renderDay={renderCustomDay}
      />
  </View>
  )
}

但是这不起作用...

在此输入图片描述

我做错了什么？

Answer 1

const markedDates = {
  '2024-05-10': { customText: '🔥' },
  '2024-05-11': { customText: '👌' },
};

return (
    <Calendar
      dayComponent={({ date }) => {
        const customDay = markedDates[date.dateString];
        return (
          <View>
            <Text>{date.day}</Text>
            {customDay && <Text>{customDay.customText}</Text>}
          </View>
        );
      }}
    />
)

有效