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

问题描述 投票:0回答:1

我现在有用于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> ) }
但是这不起作用...

在此输入图片描述

我做错了什么?

javascript reactjs react-native
1个回答
0
投票
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> ); }} /> )

有效

© www.soinside.com 2019 - 2024. All rights reserved.