时间戳

首页 > 解决方案 > react-native-calendars 日历高度不变

android - react-native-calendars 日历高度不变

问题描述

我正在使用 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

但没有任何效果。有人知道我该如何解决这个问题吗？ 在此处输入图像描述

标签： androidiosreact-native

解决方案

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

<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
   }
}

推荐阅读