npm 包 react-native-calendar-list 使用教程

阅读时长 58 分钟读完

简介

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

纠错
反馈
相关推荐
精选内容