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

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

第一个是方形日历，第二个是水平平面列表

如果这是你的项目，你们中的任何一个人能建议你将如何进行吗

谢谢和亲切的问候，

---

Avinash

也许你可以试试

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}
                        />

this.dateSelected（日期）}
DatesHitelist={DatesHitelist}
/>

下面是它的外观

---

也许您可以试试

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}
                        />

this.dateSelected（日期）}
DatesHitelist={DatesHitelist}
/>

下面是它的外观

---

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

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

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

---

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

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

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

---

我创建了一个日历条组件，它支持按周滑动

使用水平平面列表，延迟加载日期在一周内更改

并支持立即开始，向下滑动手势回拨，等等

---

我创建了一个日历条组件，支持刷卡换周

使用水平平面列表，延迟加载日期在一周内更改

并支持立即开始，向下滑动手势回拨，等等

---

我知道使用现有的LIB是一种可行的方法，但我想知道是否还有其他选择。我想你会想念我的。我不是建议您使用现有的LIB。我是说你可以下载和修改他们的代码中的样式。例如，这是一个库，这是一个修改过的库，我也会使用你的建议：）我知道使用现有的libs是一个不错的选择，但我想知道是否还有其他选择。我想你想念我。我不是建议您使用现有的LIB。我是说你可以下载和修改他们的代码中的样式。例如，这是一个库和这个修改过的库，我也将使用您的建议：）抱歉，太苛刻了，但您没有实现，这是日历条github中的示例抱歉，太苛刻了，但您没有实现，这是日历条github中的示例