如何在 React Native 中创建自定义日历？

Posted 2023-03-15

【中文标题】如何在 React Native 中创建自定义日历？

【英文标题】：How to create custom calendar in React Native?

【发布时间】：2017-12-28 08:23:47

【问题描述】：

我需要在 React Native 中创建自定义日历。我在下面附上了一些截图。

第一个是方形日历，第二个是水平 flatList。

如果这是你的项目，你们中的任何人都可以建议如何进行吗？

感谢和亲切的问候， 阿维纳什

【参考方案1】：

有几种方法可以制作您的自定义日历

您可以下载库[不安装]，然后编辑它们的代码以制作您自己的库并将其添加到您的组件中。（首选方式）

或者您可以将布局设置为几天、几周、几个月等，并使用滚动视图使其可滑动。大多数库也使用滚动视图。

【讨论】：

我知道使用现有的库是可行的方法，但我想知道是否还有其他选择。

我想你错过了理解我。我不建议您使用现有的库。我是说你可以在他们的代码中下载和修改他们的样式。例如，这是库 github.com/wix/react-native-calendars 和这个修改后的库 github.com/eals/react-native-calender-pn-wix-extended

我也会采纳你的建议 :)

【参考方案2】：

我创建了一个支持滑动更改星期的日历条组件。

使用水平 FlatList，每周更改延迟加载日期。

并支持今天去、向下滑动手势回调等。

https://github.com/FaiChou/react-native-slideable-calendar-strip

【参考方案3】：

也许你可以试试react-native-calendar-strip。我已经用过好几次了，它很好用。

这是我实现它的方法。

<CalendarStrip
                            calendarAnimation=type: 'sequence', duration: 30
                            daySelectionAnimation=type: 'border', duration: 200, borderWidth: 1, borderHighlightColor: 'white'
                            style=height: 80, paddingTop: 20, paddingBottom: 10, marginBottom: 15
                            calendarHeaderStyle=color: 'white'
                            calendarColor='#7743CE'
                            dateNumberStyle=color: 'white'
                            dateNameStyle=color: 'white'
                            highlightDateNumberStyle=color: 'yellow'
                            highlightDateNameStyle=color: 'yellow'
                            disabledDateNameStyle=color: 'grey'
                            disabledDateNumberStyle=color: 'grey'
                            onDateSelected=(date)=>this.dateSelected(date)
                            datesWhitelist=datesWhitelist
                        />

这是它的外观。

【讨论】：

对不起，你没有实现，这是来自日历条github的例子