react-native-calendars日程使用及最简单实现跟随系统主题色

1.引入

import { Calendar, LocaleConfig, Agenda } from 'react-native-calendars';

2.配置中文样式

LocaleConfig.locales['zh'] = {
  monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
  dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
  today: '今天'
};

LocaleConfig.defaultLocale = 'zh';

3.使用

  const renderItem = (item: any, firstItemInDay: any) => {
     
      return (
        <View style={{ paddingVertical: 10, borderBottomWidth: 1, borderColor: '#ccc' }}>
        	//每个日程列表展示的内容
        </View>

      );
    };

    const renderEmptyDate = () => {
      return (
      //没有日程是展示的内容
        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
          <Text>当前暂无事项</Text>
        </View>
      );
    };

   <Agenda
   //因为Themecolor变化时，日程的背景色还是之前的，theme并没有重新加载，添加key,每次修改key从新加载Agenda从而实现theme的更新
            key={themeColorNum}//数字
            items={AgendaItem}//展示的数据
            renderEmptyData={renderEmptyDate}
            renderEmptyDate={renderEmptyDate}
            renderItem={renderItem}
            theme={{//样式
              backgroundColor: Themecolor,
              calendarBackground: Themecolor,
              textSectionTitleColor: '#fff',
              selectedDayBackgroundColor: '#ede273',
              selectedDayTextColor: '#000',
              todayTextColor: '#ede273',
              dayTextColor: '#fff',
              textDisabledColor: '#fff',
              arrowColor: '#fff',
              textMonthFontWeight: 'bold',
              monthTextColor: '#fff',
            }}
            //因为切换日期有时会发生日程混乱，所以切换一次数据重新加载一次
            onDayPress={day => this.getAllTask()}
          />