React-native-calendars中TimelineList自定义事件文本为白色的实现问题

问题描述 #

使用react-native-calendars的ExpandableCalendar与TimelineList组件开发预约列表时，事件文本默认是灰黑色，想要改为白色，但自定义的renderEvent方法未生效。

原组件代码：

<CalendarProvider
                date={this.state.selectedDate}
                showTodayButton
                disabledOpacity={0.6}
                numberOfDays={3}
                style={styles.absolute}
            >
                <ExpandableCalendar
                    firstDay={0}
                    minDate={this.state.minDate}
                    maxDate={this.state.maxDate}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                />

                <TimelineList events={this.state.events} timelineProps={this.timelineProps} showNowIndicator scrollToNow />
    </CalendarProvider>

自定义renderEvent方法：

renderEvent = (event: MyScheduleEvent) => {
        return (
            <View
                style={{
                    backgroundColor: event.color,
                }}
            >
                <Text style={{ color: "white" }}>{event.title}</Text>
                <Text>
                    {event.start} - {event.end}
                    test kr neki
                </Text>
            </View>
        );
    };

问题原因 #

自定义的renderEvent方法没有传递给TimelineList组件，组件仍使用默认渲染逻辑，导致自定义样式不生效；同时时间文本的Text标签未设置白色样式。

解决方案 #

1. 将自定义renderEvent方法传递给TimelineList组件，可以通过timelineProps传入，或者直接作为组件属性传入。
2. 给时间文本的Text标签也添加白色样式。

修改后的代码 #

方式一：通过timelineProps传递renderEvent

先更新timelineProps，加入自定义的renderEvent：

// 保留原有属性，添加renderEvent
timelineProps = {
  // 你的其他属性...
  renderEvent: this.renderEvent
};

方式二：直接在TimelineList组件上传入renderEvent

<CalendarProvider
    date={this.state.selectedDate}
    showTodayButton
    disabledOpacity={0.6}
    numberOfDays={3}
    style={styles.absolute}
>
    <ExpandableCalendar
        firstDay={0}
        minDate={this.state.minDate}
        maxDate={this.state.maxDate}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
    />

    <TimelineList 
        events={this.state.events} 
        timelineProps={this.timelineProps} 
        showNowIndicator 
        scrollToNow
        renderEvent={this.renderEvent}
    />
</CalendarProvider>

更新renderEvent方法（补全时间文本的白色样式）

renderEvent = (event: MyScheduleEvent) => {
    return (
        <View
            style={{
                backgroundColor: event.color,
            }}
        >
            <Text style={{ color: "white" }}>{event.title}</Text>
            <Text style={{ color: "white" }}>
                {event.start} - {event.end}
                test kr neki
            </Text>
        </View>
    );
};

内容的提问来源于stack exchange，提问作者Anze