React Native 更改日历高度

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

React Native 更改日历高度

React Native change calendar height

react-native

react-native-calendars