Expo/React Native中实现日历日期对角渐变背景的最优方法

嘿，这个需求我刚好在项目里折腾过！用Expo的话，组件绝对是最优解，比你之前用的CSS渐变更适配跨平台场景，而且实现起来超顺畅～

为什么选expo-linear-gradient？ #

React Native的StyleSheet本身不支持linear-gradient属性（仅React Native for Web兼容），而expo-linear-gradient是Expo官方提供的跨平台渐变组件，能保证iOS、Android、Web端效果完全一致，性能也更靠谱。

实现步骤 #

1. 先安装依赖

打开终端执行安装命令：

npx expo install expo-linear-gradient

2. 自定义日期单元格组件

不管你是自己写日历还是用第三方日历库，都可以把需要特殊样式的日期单元格用LinearGradient包裹，示例代码如下：

import { View, Text, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

const DateCell = ({ date, isCheckInOut }) => {
  return (
    <View style={styles.cellContainer}>
      {isCheckInOut ? (
        // 左上到右下的对角渐变，完美匹配半绿半红需求
        <LinearGradient
          colors={['#beffbe', '#ffbdc2']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.gradientBg}
        >
          <Text style={styles.dateText}>{date}</Text>
        </LinearGradient>
      ) : (
        <View style={styles.normalBg}>
          <Text style={styles.dateText}>{date}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  cellContainer: {
    width: 42,
    height: 42,
    borderRadius: 8,
    overflow: 'hidden', // 防止渐变溢出圆角
    margin: 2,
  },
  gradientBg: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  normalBg: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  dateText: {
    fontSize: 16,
    fontWeight: '500',
  },
});

export default DateCell;

3. 适配第三方日历库（比如react-native-calendars）

如果用现成的日历组件，只需要在自定义日期渲染的回调里替换成渐变组件即可：

import { Calendar } from 'react-native-calendars';
import { LinearGradient } from 'expo-linear-gradient';

// 在页面组件中使用
<Calendar
  renderDay={(day) => {
    // 替换成你的判断逻辑：是否是入住/退房日期
    const isCheckInOut = day.dateString === '2024-05-20';
    return (
      <View style={styles.dayWrapper}>
        {isCheckInOut ? (
          <LinearGradient
            colors={['#beffbe', '#ffbdc2']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={styles.dayGradient}
          >
            <Text style={styles.dayText}>{day.day}</Text>
          </LinearGradient>
        ) : (
          <Text style={styles.dayText}>{day.day}</Text>
        )}
      </View>
    );
  }}
/>

// 配套样式
const styles = StyleSheet.create({
  dayWrapper: {
    width: 42,
    height: 42,
    borderRadius: 8,
    overflow: 'hidden',
  },
  dayGradient: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  dayText: {
    fontSize: 16,
  },
});

小提示 #

• 调整start和end的坐标可以改变渐变方向，比如start={{x:0,y:1}}、end={{x:1,y:0}}就是左下到右上的对角
• 给容器加overflow: hidden是关键，不然渐变会超出圆角范围，影响视觉效果

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