0

我只是想让议程组件显示在我的 Expo 应用程序中,但是文档中提供的示例议程出现了许多类型错误(例如,最初选择的日期必须是布尔值??那个没有意义) . 在玩弄它之后,我摆脱了每个参数上的类型错误,但是议程组件本身然后吐出一个错误,说我缺少大量字段。我试过复制其他人的示例议程,但我得到了同样的错误!

消除其他错误后,议程组件上的错误:

Type '{ items: { '2021-12-22': { name: string; height: number; day: string; }[]; '2021-12-23': { name: string; height: number; day: string; }[]; '2021-12-24': never[]; '2021-12-25': { name: string; height: number; day: string; }[]; }; ... 19 more ...; style: {}; }' is missing the following properties from type 'Pick<Readonly<AgendaProps> & Readonly<{ children?: ReactNode; }>, "testID" | "children" | "hitSlop" | "onLayout" | "pointerEvents" | ... 194 more ... | "webAriaLevel">': showOnlySelectedDayItems, item ts(2739)

我的议程组件(非常简单,我只想让它出现):

<Agenda
          // The list of items that have to be displayed in agenda. If you want to render item as empty date
          // the value of date key has to be an empty array []. If there exists no value for date key it is
          // considered that the date in question is not yet loaded
          items={{
            '2021-12-22': [{name: 'item 1 - any js object', height: 80, day: ''}],
            '2021-12-23': [{name: 'item 2 - any js object', height: 80, day: ''}],
            '2021-12-24': [],
            '2021-12-25': [{name: 'item 3 - any js object', height: 100, day: ''}, {name: 'any js object', height: 80, day: ''}]
          }}
          // Callback that gets called when items for a certain month should be loaded (month became visible)
          //    loadItemsForMonth={(month) => {console.log('trigger items loading')}}
          // Callback that fires when the calendar is opened or closed
          onCalendarToggled={(calendarOpened) => {console.log(calendarOpened)}}
          // Callback that gets called on day press
          onDayPress={(day) => {console.log('day pressed')}}
          // Callback that gets called when day changes while scrolling agenda list
          onDayChange={(day) => {console.log('day changed')}}
          // Initially selected day
          selected= {true}
          // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
          //    minDate={'2012-05-10'}
          // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
          //    maxDate={'2012-05-30'}
          // Max amount of months allowed to scroll to the past. Default = 50
          pastScrollRange={50}
          // Max amount of months allowed to scroll to the future. Default = 50
          futureScrollRange={50}
          // Specify how each item should be rendered in agenda
          renderItem={(item, firstItemInDay) => {return (<View />);}}
          // Specify how each date should be rendered. day can be undefined if the item is not first in that day
          renderDay={(day, item) => {return (<View />);}}
          // Specify how empty date content with no items should be rendered
          renderEmptyDate={() => {return (<View />);}}
          // Specify how agenda knob should look like
          renderKnob={() => {return (<View />);}}
          // Specify what should be rendered instead of ActivityIndicator
          renderEmptyData = {() => {return (<View />);}}
          // Specify your item comparison function for increased performance
          rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
          // Hide knob button. Default = false
          hideKnob={true}
          // When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false
          showClosingKnob={false}
          // By default, agenda dates are marked if they have at least one item, but you can override this if needed
          markedDates={{
            '2012-05-16': {selected: true, marked: true},
            '2012-05-17': {marked: true},
            '2012-05-18': {disabled: true}
          }}
          // If disabledByDefault={true} dates flagged as not disabled will be enabled. Default = false
          disabledByDefault={true}
          // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly
          onRefresh={() => console.log('refreshing...')}
          // Set this true while waiting for new data from a refresh
          refreshing={false}
          // Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView
          //    refreshControl={null}

          // Agenda theme
          theme={{
            backgroundColor: Colours.myMainDark,
            calendarBackground: Colours.myMainDark,
            textSectionTitleColor: 'rgba(255, 255, 255, 0.5)',
            textSectionTitleDisabledColor: 'green',
            selectedDayBackgroundColor: 'yellow',
            selectedDayTextColor: 'purple',
            todayTextColor: Colours.myAccent,
            dayTextColor: Colours.myWhiteText,
            textDisabledColor: 'rgba(255, 255, 255, 0.5)',
            dotColor: 'pink',
            selectedDotColor: '#ffffff',
            arrowColor: Colours.myPrimary,
            disabledArrowColor: '#d9e1e8',
            monthTextColor: Colours.myPrimary,
            indicatorColor: 'white',
            textDayFontFamily: Font.mainFont,
            textMonthFontFamily: Font.mainFont,
            textDayHeaderFontFamily: Font.mainFont,
            textDayFontWeight: '300',
            textMonthFontWeight: 'bold',
            textDayHeaderFontWeight: '300',
            textDayFontSize: 16,
            textMonthFontSize: 16,
            textDayHeaderFontSize: 16,
            agendaDayTextColor: 'yellow',
            agendaDayNumColor: 'green',
            agendaTodayColor: 'red',
            agendaKnobColor: 'blue'
          }}
          // Agenda container style
          style={{}}
        />
4

0 回答 0