如何使用react-native-calendars在日历每个日期节点上渲染对应图片

开发者阿泽

2026-10-3

解决方案

react-native-calendars组件自带自定义日期单元格的能力，直接使用dayComponent属性就能实现每个日期位置渲染指定图片的需求，无需额外改造组件，具体实现步骤如下：

首先封装自定义日期单元格组件，内部维护日期和对应图片的映射关系，根据当前日期渲染匹配的图片
示例代码如下：

import { Image, Text, View } from 'react-native';
import { Calendar } from 'react-native-calendars';

// 自定义日期单元格
const CustomDayItem = ({ date, state }) => {
  // 按实际业务需求维护日期和图片的映射表，date.dateString为YYYY-MM-DD格式
  const dateImageMap = {
    '2024-05-01': require('./assets/holiday.png'),
    '2024-05-20': require('./assets/lover.png')
  };
  const currentImage = dateImageMap[date.dateString];
  
  return (
    <View style={{ height: 60, alignItems: 'center', justifyContent: 'center' }}>
      {/* 要实现图片作为单元格背景的效果，给Image加上绝对定位，宽高设为100%即可 */}
      {currentImage && (
        <Image 
          source={currentImage} 
          style={{ 
            position: 'absolute', 
            width: '100%', 
            height: '100%', 
            resizeMode: 'cover',
            opacity: 0.7
          }} 
        />
      )}
      {/* 渲染日期数字，state参数可区分禁用、今日、选中状态，按需调整样式 */}
      <Text style={{ color: state === 'disabled' ? '#aaa' : '#333' }}>
        {date.day}
      </Text>
    </View>
  );
};

// 调用日历组件时传入自定义单元格即可
const CustomCalendar = () => {
  return <Calendar dayComponent={CustomDayItem} />;
};

如果使用远程网络图片，将require引入的本地资源替换为{uri: '网络图片地址'}即可，注意要给Image组件设置明确的宽高避免图片无法渲染。
如果需要适配选中、禁用等交互状态，直接通过CustomDayItem接收的state参数判断即可，state可选值为disabled、today、selected，可以对应调整图片透明度、文字颜色等样式。