我现在有用于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>
)
}
但是这不起作用...
我做错了什么?
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>
);
}}
/>
)
有效