Question

我正在尝试制作一个带有日历和下面其他内容的页面。我正在使用wix / react-native-calendars，并且无法更改日历的高度。当我把高度设为它时，只需剪掉日历即可。

  <CalendarList
    horizontal={true}
    pagingEnabled={true}
    style={{height: SCREEN_HEIGHT * 0.4}}
  />

Answer 1

如果要完全控制日历样式，可以通过覆盖默认的style.js文件来实现。例如，如果要首先覆盖样式，则必须找到此文件的样式表ID：

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

在这种情况下，它是stylesheet.calendar.header。接下来，您可以使用此ID向您的主题添加替代样式表。

https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.js#L56

 theme={{
      arrowColor: 'white',
      'stylesheet.calendar.header': {
        week: {
          marginTop: 5,
          flexDirection: 'row',
          justifyContent: 'space-between'
        }
      }
    }}

反应本机更改日历高度

1 个答案: