我只是想让议程组件显示在我的 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={{}}
/>