反应原生日历高度问题

问题描述 投票:0回答:1

基本上我使用的是 React Native 日历,我面临着日历高度问题。

当我在大屏幕尺寸(例如处于纵向模式的平板电脑)上使用我的应用程序时,日历在父视图中看起来很好,但是当我在手机等小型设备上运行相同的应用程序时,我只能看到 3 行日历。

在此输入图片描述

过去三天我一直在尝试一切,但没有任何效果对我来说。

<View style={{ width: wd * 0.87, flex: 0.50 }}>
  <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:0.85 }}>
    <Calendar
      // dayLabelsWrapperStyle={{ paddingHorizontal: 50 }}
      showSixWeeks={true}
      showWeekNumbers={false}
      onDayPress={(day) => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: { selected: true, disableTouchEvent: true, selectedDotColor: 'orange' },
      }}
      style={{  }}
      theme={{
        calendarBackground: 'transparent',
        arrowColor: '#848A95',
        selectedDayTextColor: '#ffffff',
        selectedDayBackgroundColor: '#94ADFD',
        textMonthFontSize:moderateScale(14),
      dayTextColor:'green',
      textDayFontSize:moderateScale(12),
      // textDayHeaderFontSize:moderateScale(269),
        textDayHeaderFontWeight: 'bold',
        'stylesheet.calendar.header': {
          dayHeader: {
            color: 'black',
          },
          
        },
      }}
    />
  </View>
</View>
react-native react-hooks calendar
1个回答
0
投票

试试这个:

© www.soinside.com 2019 - 2024. All rights reserved.