Question

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

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

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

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

Answer 1

也许你可以试试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}
                        />

以下是它的外观。

Answer 2

制作自定义日历有多种方法

您可以下载库[不安装]，然后编辑他们的代码以创建自己的库并将其添加到您的组件中。（首选方式）
或者您可以将布局设置为数天，数周，数月等，并使用滚动视图使其可以滑动。大多数库也使用滚动视图。

Answer 3

我创建了一个日历条组件，支持滑动以更改周。

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

支持今天去，向下轻扫手势回调，依此类推。

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

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

3 个答案: