react-native-calendars 日历高度不变答案

【问题标题】：react-native-calendars calendar height doesn't changereact-native-calendars 日历高度不变
【发布时间】：2021-02-23 20:04:05
【问题描述】：

我正在使用 react-native-calendars 在我的项目中显示日历。但是，我无法改变它的高度。它会更改灰色边框的高度，但不会更改显示日期的位置。

这是原始代码：

<SafeAreaView>
            <Calendar
                // Specify style for calendar container element. Default = {}
                style={{
                    borderWidth: 5,
                    borderColor: 'gray',
                    height: 100
                }}
                // Specify theme properties to override specific styles for calendar parts. Default = {}
                theme={{
                    backgroundColor: '#ffffff',
                    calendarBackground: '#ffffff',
                    textSectionTitleColor: '#b6c1cd',
                    textSectionTitleDisabledColor: '#d9e1e8',
                    selectedDayBackgroundColor: '#00adf5',
                    selectedDayTextColor: '#ffffff',
                    todayTextColor: '#00adf5',
                    dayTextColor: '#2d4150',
                    textDisabledColor: '#d9e1e8',
                    dotColor: '#00adf5',
                    selectedDotColor: '#ffffff',
                    arrowColor: 'orange',
                    disabledArrowColor: '#d9e1e8',
                    monthTextColor: 'blue',
                    indicatorColor: 'blue',
                    textDayFontFamily: 'Montserrat-Bold',
                    textMonthFontFamily: 'Montserrat-Bold',
                    textDayHeaderFontFamily: 'Montserrat-Bold',
                    textDayFontWeight: '300',
                    textMonthFontWeight: 'bold',
                    textDayHeaderFontWeight: '300',
                    textDayFontSize: 16,
                    textMonthFontSize: 16,
                    textDayHeaderFontSize: 16
                }}
                />
        </SafeAreaView>

另外，尝试覆盖其样式添加到其主题

'stylesheet.day.basic':{
            'base':{
              width:30,
              height:50,
              backgroundColor:'pink'
            }
          }

https://github.com/wix/react-native-calendars/blob/master/src/calendar/day/basic/style.js

但是没有任何效果。有人知道我该如何解决这个问题吗？ enter image description here

【问题讨论】：

请添加图片说明

标签： android ios react-native

【解决方案1】：

您需要用视图包装日历并将高度应用于视图。试试这个：

<View style={styles.calendarWrapper}>
    <Calendar
                    // Specify style for calendar container element. Default = {}
                    style={{
                        borderWidth: 5,
                        borderColor: 'gray',
                        height: 100
                    }}
                    // Specify theme properties to override specific styles for calendar parts. Default = {}
                    theme={{
                        backgroundColor: '#ffffff',
                        calendarBackground: '#ffffff',
                        textSectionTitleColor: '#b6c1cd',
                        textSectionTitleDisabledColor: '#d9e1e8',
                        selectedDayBackgroundColor: '#00adf5',
                        selectedDayTextColor: '#ffffff',
                        todayTextColor: '#00adf5',
                        dayTextColor: '#2d4150',
                        textDisabledColor: '#d9e1e8',
                        dotColor: '#00adf5',
                        selectedDotColor: '#ffffff',
                        arrowColor: 'orange',
                        disabledArrowColor: '#d9e1e8',
                        monthTextColor: 'blue',
                        indicatorColor: 'blue',
                        textDayFontFamily: 'Montserrat-Bold',
                        textMonthFontFamily: 'Montserrat-Bold',
                        textDayHeaderFontFamily: 'Montserrat-Bold',
                        textDayFontWeight: '300',
                        textMonthFontWeight: 'bold',
                        textDayHeaderFontWeight: '300',
                        textDayFontSize: 16,
                        textMonthFontSize: 16,
                        textDayHeaderFontSize: 16
                    }}
                    />
</View>

并确保创建视图包装样式。从“react-native”导入样式表：

const styles = StyleSheet.create({
   calendarWrapper:{
      height: 1000
   }
}

【讨论】：

对不起，我没有粘贴SafeAreaView的打开。但我已经用 View 进行了测试，并按照您之前的建议进行了操作。

【解决方案2】：

找到了解决办法。

我需要覆盖以下文件的几个样式： https://github.com/wix/react-native-calendars/blob/master/src/calendar/day/period/style.js

https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.js

基本上，在页眉上需要减小字体大小。如果使用句点，您还需要使用 fontSizes 和句点高度，因为它是在 34 上硬编码的。

要覆盖组件的原始样式：


<Calendar theme={{
                    backgroundColor: '#ffffff',
                    'stylesheet.calendar.header': {
                         monthText: {
                                   fontSize: 10,
                                   fontFamily: 'Montserrat-bold',
                                   margin: 10
                         }
                    }
                 }
   />

【讨论】：