简介
React Native 是一款由 Facebook 推出的开源框架，可以用 JavaScript 构建跨平台的原生应用程序。React Native 提供了许多用于构建原生应用的组件和 API，React Native Calendar List 就是其中之一。
React Native Calendar List 是一个全能型日历组件，可以在移动设备上创建高度自定义的日历视图。它提供了可自定义的样式、事件、区间选择以及多彩标记等功能。
在使用此 npm 包之前，请确保您已经安装了 React Native，并且熟悉 React Native 的基础知识。如果您还不熟悉 React Native 的基础知识，请先学习 React Native 的基础知识。
安装
运行下面的命令安装 react-native-calendar-list
--- ------- -------------------------- ------
用法
按照日期选择器布局
------ ------ - --------- - ---- --------
------ - ---- - ---- ---------------
------ ------------ ---- ----------------------------
----- ------- ------- --------- -
-------- -
------ -
------
-------------
----------------- -- ---------------------- ----- ------
--------------
------------- ---------- ----- ------- ----- -------------- --------
------------- ---------- ----- ------- ----- -------------- --------
------------- ---------- ----- ------- ----- -------------- --------
------------- ---------- ----- ------- ----- -------------- --------
------------- ---------- ----- ------- ----- -------------- -------
--
--
-------
--
-
-属性
如果您想要更改 CalendarList 的样式，您可以为其提供以下属性：
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| calendarWidth | 日历视图的宽度 | Number | 设置屏幕宽度（屏幕宽度） |
| calendarHeight | 日历视图的高度 | Number | 375 |
| markColor | 当一个日期被标记时，它的颜色将变为此颜色。 | String | 在 theme 中定义颜色（蓝色） |
| dateNumberStyle | 日期数字的样式 | ViewPropTypes.style | { fontSize: 20, fontWeight: 'bold' } |
| dateNameStyle | 日期名称的样式（例如，Sun，Mon，Tue等） |
ViewPropTypes.style | { fontSize: 12 } |
| monthTitleStyle | 月标题的样式 | ViewPropTypes.style | { fontSize: 16, fontWeight: 'bold' } |
| dayContainerStyle | 一个日期视图的容器样式。您可以在此自定义日期试图的容器样式 | ViewPropTypes.style | {} |
| selectedDayBackgroundColor | 日期被选择时的背景颜色 | String | 在 theme 中定义的颜色（红色） |
| selectedDayTextColor | 日期的文本颜色当被选择时 | String | 在 theme 中定义的颜色（白色） |
| todayBackgroundColor | 今天的背景颜色 | String | 在 theme 中定义的颜色（黄色） |
| todayTextColor | 今天的文本颜色 | String | 在 theme 中定义的颜色（白色） |
| activeDayBackgroundColor | 活动的日期的背景颜色 | String | 在 theme 中定义的颜色（蓝色） |
| activeDayTextColor | 活动的日期文本颜色 | String | 在 theme 中定义的颜色（白色） |
| inactiveMonthTextColor | 非活动的月份文本颜色（例如天数不在当前月份） | String | 在 theme 中定义的颜色（灰色） |
| renderHeader | 一个自定义头组件的函数。这个函数应该返回一个 React 元素。 | func | 自定义年月列表头 |
| hideExtraDays | 标记日期之外的日期是否隐藏 | Boolean | false |
| firstDay | 日历的第一天 | Number | 0 （星期天） |
| theme | 日历主题对象 | Object | {}（空对象） |
| showWeekNumber | 显示周数 | Boolean | false |
| weekNumberStyle | 周数样式 | ViewPropTypes.style | {} |
| markedDates | 为每个日期应用样式的对象。日期应以 'yyyy-mm-dd' 格式提供，例如，2018-02-16。除此之外，可以为所需的日期提供 selected，disabled，active，inactive，reservation，customStyles 和任何其他自定义属性。customStyles 属性允许您为每个标记提供自定义样式。 │ customStyles 属性必须是一个使用日期字符串的对象。 │ 每个日期对象中，可以使用任何 React Native 视图组件的任何可见属性。 |
Object | {}（空对象） |
| markingType | markingType 旨在为您提供标记日期的不同方式。除了默认样式之外，您可以通过在 markingType 属性中指定 multi-dot 或 period 来指定不同的标记类型。 |
String | 'simple' |
| onDayLongPress | 日期长按事件 | func | None（未定义） |
| onDayPress | 日期点击事件 | func | None（未定义） |
| onMonthChange | 当月改变时触发的事件 | func | None（未定义） |
| disableMonthChange | 禁用月份切换的用户交互 | Boolean | false |
| hideArrows | 隐藏月份切换箭头。如果启用，您需要提供自定义标题。 | Boolean | false |
| disableAllTouchEventsForDisabledDays | 如果日期被标记为禁用，则禁用日历上的所有交互事件。请注意，如果要在同一日期上拥有多个标记，并且其中一个标记被禁用，则所有标记都将被禁用。 | Boolean | false |
| staticHeader | 如果启用，将不会为月份更改构建动态标题。相反，您需要提供自定义标题，而不需要配置 renderHeader。 |
Boolean | false |
事件
以下是所提供的事件：
onDayPress(date)
日期被选择时调用，其中 date 属性包含一个格式为 yyyy-mm-dd 的字符串。
----------------- -- ---------------------- ----- ------
onMonthChange(month)
每当月份更改时调用。
---------------------- -- ------------------- --------- --------
onDayLongPress(date)
长按日期时调用，其中 date 属性为选定日期。
--------------------- -- ---------------------- ----- ------
例子
------ ------ - --------- - ---- --------
------ - ---- - ---- ---------------
------ ------------ ---- ----------------------------
----- --- ------- --------- -
-------- -
------ -
------
-------------
----------------- -- ---------------------- ----- ------
--------------
------------- ---------- ----- ------- ----- -------------- --------
------------- ---------- ----- ------- ----- -------------- --------
------------- ---------- ----- ------- ----- -------------- --------
------------- ---------- ----- ------- ----- -------------- --------
------------- ---------- ----- ------- ----- -------------- -------
--
--
-------
--
-
-结论
React Native Calendar List 提供了一个高度可配置的日历视图。我们可以使用不同的属性，将它们传递给 CalendarList 组件，以更改相应的样式或行为。通过使用不同的标记和事件，我们可以更改日历的样子和行为。
希望本篇文章对大家有所帮助，也希望你们能在自己的项目中使用这款优秀的日历组件，为你们的项目增加不少美感。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562eb81e8991b448e09c0