React Native Calendars高度适配问题：小屏设备仅显示3行日历

问题核心原因 #

你当前依赖的纯flex比例布局在小屏设备上分配给日历的高度不足，再加上showSixWeeks={true}要求显示6周日历，双重因素导致高度被挤压，仅能显示3行。

具体修复方案 #

• 给日历容器设置最小高度，替代纯flex比例
  把最外层容器的flex:0.50改为flex:1, minHeight: moderateScale(400)，日历所在内层View的flex:0.85改为flex:1, minHeight: moderateScale(320)，确保小屏设备上日历有基础高度支撑，大屏设备可自动扩展。

• 自定义Calendar主题样式，强制控制周行高度
  在theme中添加日历容器和周行的高度配置，保证每行周的高度足够容纳内容，6周能完整显示：

  theme={{
    // 原有主题配置...
    'stylesheet.calendar.main': {
      container: {
        minHeight: moderateScale(320),
      },
    },
    'stylesheet.calendar.week': {
      container: {
        height: moderateScale(45),
      },
    },
  }}
  

• 动态控制showSixWeeks属性（可选优化）
  根据屏幕宽度判断设备类型，小屏时关闭6周显示，减少高度占用：

  import { Dimensions } from 'react-native';
  const { width } = Dimensions.get('window');
  const isSmallScreen = width < 375; // 可根据需求调整阈值
  
  // Calendar组件中使用：
  showSixWeeks={!isSmallScreen}
  

修改后的完整代码示例 #

import { View, Text, Dimensions } from 'react-native';
import { Calendar } from 'react-native-calendars';
// 假设已导入moderateScale及selected状态相关逻辑

const { width } = Dimensions.get('window');
const isSmallScreen = width < 375;

export default function YourComponent() {
  // ...你的selected状态和setSelected方法

  return (
    <View style={{ width: width * 0.87, flex: 1, minHeight: moderateScale(400) }}>
      <View style={{ flex: 0.15, justifyContent: 'center' }}>
        <Text style={{ fontWeight: 'bold', color: '#000000', fontSize: moderateScale(17) }}>Select Date</Text>
      </View>

      <View style={{ backgroundColor: '#EBF3FF', borderRadius: moderateScale(20), overflow: 'hidden', flex: 1, minHeight: moderateScale(320) }}>
        <Calendar
          showSixWeeks={!isSmallScreen}
          showWeekNumbers={false}
          onDayPress={(day) => {
            setSelected(day.dateString);
          }}
          markedDates={{
            [selected]: { selected: true, disableTouchEvent: true, selectedDotColor: 'orange' },
          }}
          theme={{
            calendarBackground: 'transparent',
            arrowColor: '#848A95',
            selectedDayTextColor: '#ffffff',
            selectedDayBackgroundColor: '#94ADFD',
            textMonthFontSize: moderateScale(14),
            dayTextColor: 'green',
            textDayFontSize: moderateScale(12),
            textDayHeaderFontWeight: 'bold',
            'stylesheet.calendar.header': {
              dayHeader: {
                color: 'black',
              },
            },
            'stylesheet.calendar.main': {
              container: {
                minHeight: moderateScale(320),
              },
            },
            'stylesheet.calendar.week': {
              container: {
                height: moderateScale(45),
              },
            },
          }}
        />
      </View>
    </View>
  );
}

额外提示 #

• 测试时优先在小屏设备上验证，调整minHeight和周行高度的数值，直到日历完整显示。
• 如果使用react-native-size-matters的moderateScale，确保其缩放比例符合你的设备适配需求。

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