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

【问题标题】：How to create custom calendar in React Native?如何在 React Native 中创建自定义日历？
【发布时间】：2017-12-28 08:23:47
【问题描述】：

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

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

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

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

【问题讨论】：

标签： ios react-native mobile

【解决方案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的例子