一：介绍
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
在React Native移动平台项目开发中，除了React Native 提供的封装好的部分插件和原声组建外，在实际的项目中还需要使用到很多其他的插件，比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能，都为IDE开发平台提供封装好的插件，以便项目开发使用。
另外，这些博文都是来源于我日常开发中的技术总结，在时间允许的情况下，我会针对技术点分别分享iOS、Android两个版本，如果有其他技术点需要，可在文章后留言，我会尽全力帮助大家。这篇文章重点介绍系统日历插件的开发与使用
二：实现思路分析
系统日历插件是将App事件添加到系统日历提醒事项，实现闹铃提醒的功能封装在CalendarManager类中，实现createEventCalendarTitle事件添加方法和checkCalendarEventStartDate事件移除方法。Calendar类中引入CalendarManager类，调用系统日历事件添加方法、系统日历事件查询和事件移除方法。
具体的实现思路如下：
-
新建Calendar类，实现RCTBridgeModule协议
-
添加RCT_EXPORT_MODULE()宏
-
添加React Native跟控制器
-
声明被JavaScript 调用的方法
-
新建CalendarManager类，实现系统日历
-
实现系统日历事件添加
-
实现系统日历事件查询
-
实现系统日历事件移除
-
Javascript调用浏览器方法
三：实现源码分析
实现源码分析是根据上面列出的具体实现思路来为大家解刨内部的实现流程及核心代码分析。
1. 新建Calendar类，实现RCTBridgeModule协议
新建继承NSObject的Calendar类，并实现RCTBridgeModule协议
// Calendar.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface Calendar : NSObject<RCTBridgeModule>
@end
2. 添加RCT_EXPORT_MODULE()宏
为了实现RCTBridgeModule协议，Calendar的类需要包含RCT_EXPORT_MODULE()宏。
并在这个宏里面添加一个参数“Calendar”用来指定在 JavaScript 中访问这个模块的名字。
如果你不指定，默认就会使用这个 Objective-C 类的名字。
如果类名以 RCT 开头，则 JavaScript 端引入的模块名会自动移除这个前缀。
// Calendar.m
#import "Calendar.h"
@implementation Calendar
RCT_EXPORT_MODULE(Calendar);
@end
3. 添加React Native跟控制器
如果不添加React Native跟控制器，view将不能正常显示出来，实现方法如下：
// Calendar.m
#import <React/RCTUtils.h>
引入<React/RCTUtils.h>之后，在视图初始化或者显示的时候，按照如下方法调用即可
UIViewController *vc = RCTPresentedViewController();
4. 声明被JavaScript 调用的方法
React Native需要明确的声明要给 JavaScript 导出的方法，否则 React Native 不会导出任何方法。下面通过举例来展示声明的方法，通过RCT_EXPORT_METHOD()宏来实现：
// Calendar.m
#import "Calendar.h"
#import <React/RCTUtils.h>
@implementation Calendar
RCT_EXPORT_MODULE(Calendar);
RCT_EXPORT_METHOD(addCalenderEvent:(NSDictionary *)calendarDic :(RCTResponseSenderBlock)sucessCallback :(RCTResponseSenderBlock)failCallback){
NSLog(@"调起添加日历方法");
}
RCT_EXPORT_METHOD(checkCalenderEvent:(NSDictionary *)calenderDic :(RCTResponseSenderBlock)sucessCallback :(RCTResponseSenderBlock)failCallback){
NSLog(@"调起日历事件集合方法");
}
RCT_EXPORT_METHOD(removeCalenderEvent:(NSDictionary *)calenderDic :(RCTResponseSenderBlock)sucessCallback :(RCTResponseSenderBlock)failCallback){
NSLog(@"移除日历事件");
}
@end
5. 新建CalendarManager类，实现系统日历
在CalendarManager类中实现系统日历事件的添加，移除，事件查询等方法。
核心源码如下：
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
typedef void (^CalendarBlock)(NSDictionary *backDic);
typedef void (^CalendarCheckBlock)(NSDictionary *backDic);
@interface CalendarManager : NSObject
+ (instancetype)sharedEventCalendar;
/**
* 将App事件添加到系统日历提醒事项，实现闹铃提醒的功能
*
* @param title 事件标题
* @param location 事件位置
* @param startDate 开始时间
* @param endDate 结束时间
* @param allDay 是否全天
* @param alarmArray 闹钟集合
*/
- (void)createEventCalendarTitle:(NSString *)title location:(NSString *)location startDate:(NSDate *)startDate endDate:(NSDate *)endDate allDay:(BOOL)allDay alarmArray:(NSArray *)alarmArray;
- (void)checkCalendarEventStartDate:(NSDate *)startDate endDate:(NSDate *)endDate;
@property(nonatomic,strong)UIViewController *mainvc;
@property(nonatomic,copy)CalendarBlock calBlock;
@property(nonatomic,copy)CalendarCheckBlock checkBlock;
@end
6. 实现系统日历事件添加
系统日历事件添加需要调用CalendarManager类中的createEventCalendarTitle方法，其中参数分别是，事件标题、事件位置、开始时间、结束时间、是否全天、闹钟集合，并通过calBlock方法获取添加事件的详情。
核心源码如下：
CalendarManager *calendarM = [CalendarManager sharedEventCalendar];
calendarM.mainvc =[self currentViewController];
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateFormat:@"yyyy-MM-dd HH:mm"];
NSDate *start = [dateFormatter dateFromString:[NSString stringWithFormat:@"%@",calendarDic[@"startDate"]]];
NSDate *end = [dateFormatter dateFromString:[NSString stringWithFormat:@"%@",calendarDic[@"endDate"]]];
[calendarM createEventCalendarTitle:[NSString stringWithFormat:@"%@",calendarDic[@"title"]] location:[NSString stringWithFormat:@"%@",calendarDic[@"notes"]] startDate:start endDate:end allDay:NO alarmArray:@[@"-3000"]];
calendarM.calBlock = ^(NSDictionary *backDic) {
if ( [backDic.allKeys containsObject:@"status"]) {
sucessCallback(@[backDic]);
}else{
failCallback(@[backDic]);
}
};
7. 实现系统日历事件查询
系统日历事件查询需要调用CalendarManager类中的checkBlock方法，返回backDic字典，其中包括日历事件的详情。
核心源码如下：
CalendarManager *calendarM = [CalendarManager sharedEventCalendar];
calendarM.mainvc =[self currentViewController];
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateFormat:@"yyyy-MM-dd HH:mm"];
calendarM.checkBlock = ^(NSDictionary *backDic) {
if ([backDic.allKeys containsObject:@"status"]) {
sucessCallback(@[backDic]);
}else{
failCallback(@[backDic]);
}
};
8. 实现系统日历事件移除
系统日历事件移除需要调用CalendarManager类中的checkBlock方法，返回backDic字典，其中包括日历事件的详情。
核心源码如下：
EKEventStore *myEventStore = [[EKEventStore alloc] init];
EKEvent *event = [myEventStore eventWithIdentifier:[NSString stringWithFormat:@"%@", calenderDic [@"eventIdentifier"]]];
isDeleted = [myEventStore removeEvent:event span:EKSpanThisEvent commit:YES error:&err];
NSDictionary *dic = [NSDictionary dictionary];
if (isDeleted) {
dic =@{@"status":@"1",@"data":@"删除成功"};
NSLog(@"日历事件删除成功");
sucessCallback(@[dic]);
}else{
dic =@{@"resultCode":@"-1",@"resultMessage":@"日历操作失败"};
NSLog(@"移除日历事件操作失败");
failCallback(@[dic]);
}
9. Javascript调用浏览器方法
现在从 Javascript 里可以这样调用这个方法：
import { NativeModules } from "react-native";
const CalendarPlugin = NativeModules.Calendar;
//添加日历事件
CalendarPlugin.addCalenderEvent({title:"添加日历事件标题",startDate:"2018-06-06 06:06",endDate:"2018-06-08 06:06",notes:"提示！！！"},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
//日历事件查询
CalendarPlugin.checkCalenderEvent({startDate:"2018-06-06 06:06",endDate:"2018-06-08 06:06"},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
//日历事件移除
CalendarPlugin.removeCalenderEvent({eventIdentifier:""},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
网友评论