React Native日历日程组件
时间:2022-06-05
本文章向大家介绍React Native日历日程组件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这次介绍的这个React Native日历日程组件名叫react-native-calendars,是纯JS开发,可以适配IOS和安卓双平台。使用方便,功能强大,可以通过配置自定义样式和主题,更重要的是它支持日程显示。下面我们来看看这个组件的使用方法。
安装
npm install --save react-native-calendars
因为是纯JS的,所以不需要link,执行完就可以了。
使用
react-native-calendars主要包含三种子组件,分别是 Calendar(日历), CalendarList(日历列表), Agenda(日程),可以根据实际需要选择使用。下面我们分别介绍这三种组件的使用示例。
Calendar(日历)
示例代码
<Calendar
// Initially visible month. Default = Date()
current={'2012-03-01'}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={'2012-05-10'}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={'2012-05-30'}
// Handler which gets executed on day press. Default = undefined
onDayPress={(day) => {console.log('selected day', day)}}
// Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
monthFormat={'yyyy MM'}
// Handler which gets executed when visible month changes in calendar. Default = undefined
onMonthChange={(month) => {console.log('month changed', month)}}
// Hide month navigation arrows. Default = false
hideArrows={true}
// Replace default arrows with custom ones (direction can be 'left' or 'right')
renderArrow={(direction) => (<Arrow />)}
// Do not show days of other months in month page. Default = false
hideExtraDays={true}
// If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
// day from another month that is visible in calendar page. Default = false
disableMonthChange={true}
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
firstDay={1}
// Hide day names. Default = false
hideDayNames={true}
/>
CalendarList(日历列表)
示例代码
<CalendarList
// Callback which gets executed when visible months change in scroll view. Default = undefined
onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={50}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={50}
// Enable or disable scrolling of calendar list
scrollEnabled={true}
...calendarParams
/>
Agenda(日程)
示例代码
<Agenda
// the list of items that have to be displayed in agenda. If you want to render item as empty date
// the value of date key kas to be an empty array []. If there exists no value for date key it is
// considered that the date in question is not yet loaded
items={
{'2012-05-22': [{text: 'item 1 - any js object'}],
'2012-05-23': [{text: 'item 2 - any js object'}],
'2012-05-24': [],
'2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],
}}
// callback that gets called when items for a certain month should be loaded (month became visible)
loadItemsForMonth={(month) => {console.log('trigger items loading')}}
// callback that gets called on day press
onDayPress={(day)=>{console.log('day pressed')}}
// callback that gets called when day changes while scrolling agenda list
onDayChange={(day)=>{console.log('day changed')}}
// initially selected day
selected={'2012-05-16'}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={'2012-05-10'}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={'2012-05-30'}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={50}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={50}
// specify how each item should be rendered in agenda
renderItem={(item, firstItemInDay) => {return (<View />);}}
// specify how each date should be rendered. day can be undefined if the item is not first in that day.
renderDay={(day, item) => {return (<View />);}}
// specify how empty date content with no items should be rendered
renderEmptyDate={() => {return (<View />);}}
// specify how agenda knob should look like
renderKnob={() => {return (<View />);}}
// specify your item comparison function for increased performance
rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
// Hide knob button. Default = false
hideKnob={true}
// By default, agenda dates are marked if they have at least one item, but you can override this if needed
markedDates={{
'2012-05-16': {selected: true, marked: true},
'2012-05-17': {marked: true},
'2012-05-18': {disabled: true}
}}
// agenda theme
theme={{
...calendarTheme,
agendaDayTextColor: 'yellow',
agendaDayNumColor: 'green',
agendaTodayColor: 'red',
agendaKnobColor: 'blue'
}}
// agenda container style
style={{}}
/>
说明
react-native-calendars组件的GitHub 地址:https://github.com/wix/react-native-calendars,更多的配置和使用方法请点击查看原文查看GitHub上的文档以及示例代码。
- 怎样去阅读源码,这篇文章值的你一读
- HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换
- Mybatis 3 配置 Log4j
- 基于Three.js的360度全景--photo-sphere-viewer--简介
- MyBatis3-配置使用log4j输出日志
- nginx支持跨域访问
- nginx静态资源文件无法访问,403 forbidden错误
- vue.js如何在标签属性中插入变量参数
- SpringBoot解决ajax跨域问题
- WebBrowser(IE) 与 JS 相互调用
- HOSTS配置问题导致集群异常故障分析
- Linux Regulator Framework(2)_regulator driver
- systemd的作用
- alsa声卡分析alsa-utils调用过程(二)-tinymixer
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- AkShare-债券数据-收盘收益率曲线
- Vue 项目报错:‘$‘ is not defined ( no-undef )
- SpringBoot 项目开启热部署
- 小程序文件下载并保存文件名打开
- 分享个 CTF 小工具 bruteHASH
- centos配置mutt和msmtp实现邮件发送
- CentOS8 安装 jdk8 / java8的教程(推荐)
- Ubuntu18.04 一键升级Python所有第三方包 及安装python包的方法
- 详解centos7上elastic search安装及填坑记
- Linux利用Sysctl命令调整内核参数
- 在ubuntu16.04上创建matlab的快捷方式(实现方法)
- CentOS 7.6 Telnet服务搭建过程(Openssh升级之战 第一任务备用运输线搭建)
- Ubuntu18.04下安装MySQL(图文教程)
- 基于 ffmpeg+Webassembly 实现视频帧提取
- Ubuntu14.04 opencv2.4.8和opencv3.3.1多版本共存的实现方法