尊重版权,未经授权不得转载
本文来自:江清清的技术专栏()
之前我们已经讲解过封装Android的原生模块(具体地址:) ,有Android部分封装，当然也少不了iOS平台原生模块封装啦，今天我们就一起来看一下。
刚创建的React Native技术交流5群(),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
本文章实例项目地址
有时候我们的应用需要进行访问原生平台系统的API接口，但是React Native可能还没有封装相应功能组件。还有可能我们需要去复用一些原生Objective-C,Swift或者C++代码而不是让JavaScript重新去实现一遍。或者我们可能需要些一些更加高级的功能代码，所线程相关的。例如:图片处理,数据库以及一些高级功能扩展之类的。
React Native平台的开发其实本身也是可以让你写纯原生代码并且还可以让你访问原生平台的功能。这是一个比较高级的功能不过官方还是不推荐你在平时开发中使用这样的开发形式。但是如果你具备这样的开发能力，也是还是不错的。特别当在React Native暂时未提供部分原生功能或者模块，那么你可以使用这样的方法进行封装扩展。今天我们就来看一下原生组件的封装扩展方法。
本文章就是演示如何封装原生模块，不过前提假设你已经知道熟悉Objective-C或者Swift语言以及一些核心库(例如:Foundation,UIKit)。
本次我们就拿iOS日历模块进行演示。
(二)iOS日历模块封装演示
下面开始演示如何封装一个iOS日历原生模块，让JavaScript可以进行访问到iOS平台日历的功能。
在React Native中，原生模块就是一个Objective-C类，该实现了RCTBridgeModule协议。其中RCT是ReaCT的缩写。我们看一下CalendarManger.h官方的代码:
// CalendarManager.h
#import "RCTBridgeModule.h"
@interface CalendarManager : NSObject &RCTBridgeModule&
为了实现RCTBridgeModule协议,你的CalendarManger类.m文件需要实现RCT_EXPORT_MODULE()宏，该宏有一个可选的参数可以设置指定在JavaScript端进行访问该模块的名称(更多细节可以往后面继续看)。如果你这边没有设置该名称，那么JavaScript会默认去使用Objecttive-C类名称。
到这一步CalendarManager.m文件的配置如下:
#import "CalendarManager.h"
@implementation CalendarManager
RCT_EXPORT_MODULE()
下面就是注入提供给JavaScript调用的方法，该方法必须要使用RCT_EXPORT_METHOD()宏来声明，不然这些方法JavaScript前端是无法进行调用的。看下面官方的代码:
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
NSLog(@"Pretending to create an event %@ at %@", name, location);
完成以上的步骤,我们就可以从JavaScript端进行访问这个方法了。具体调用方式如下:
import { NativeModules } from 'react-native';
var CalendarManager = NativeModules.CalendarM
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');
来最终JavaScript中的代码如下:
* Sample React Native App
* /facebook/react-native
import React,{
AppRegistry,
Component,
StyleSheet,
TouchableHighlight,
} from 'react-native';
///进行导入NativeModules中的CalendarManger模块
import { NativeModules } from 'react-native';
var CalendarManager = NativeModules.CalendarM
class CustomButton ponent {
render() {
&TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.props.onPress}&
&Text style={styles.buttonText}&{this.props.text}&/Text&
&/TouchableHighlight&
class ModulesDemo extends Component {
render() {
&View style={{marginTop:20}}&
&Text style={styles.welcome}&
封装iOS原生模块实例
&CustomButton text="点击调用原生模块addEvent方法"
onPress={()=&CalendarManager.addEvent('生日聚会', '江苏南通 中天路')}
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
backgroundColor: 'white',
padding: 10,
borderWidth:1,
borderColor: '#cdcdcd',
AppRegistry.registerComponent('ModulesDemo', () =& ModulesDemo);
点击按钮,会去调用原生模块方法,并且传入数据打印在控制台，效果截图如下:
[特别注意].JavaScript调用方法名称
封装的原生模块方法给JavaScript进行调用，通过该方法的名字进行调用。有时候可能出现同名冲突的问题，在React Native中，还好给我们定义了RCT_REMAP_EMTHOD()宏来进行重置JavaScript调用的方法名称。该宏在多个原生模块中可能封装了同样的方法名称非常有用，可以解决同名冲突问题。
CalendarManager模块在Objective-C中必须要要使用[CalendarManager new]进行初始化，并且该用于桥接调用的方法的返回值始终为void.React Native桥接的方法是异步的，所以传递一个返回值给JavaScript只能通过回调或者发送事件解决(具体我们会在后面的文章中讲解)
(三)参数类型
RCT_EXPORT_METHOD支持所有的标准的JSON对象类型，如下:
3.1.string(NSString )
3.2.number(NSInteger,float,double,CGFloat,NSNumber)
3.3.boolean(BOOL,NSNumber)
3.4.array(NSArray)
任何类型的集合
3.5.map(NSDictionary) 字典类型，包括任何类型键值对的集合
3.6.function(RCTResponseSenderBlock)
block回调对象方法
除此之外,所支持RCTConvert类支持的类型的也通用支持哦~(大家可以查看RCTConvert来了解详情)。RCTConvert还提供了一些方法可以把输入接收的JSON数据转换成原生的Objective-C类型或者类。
例如在我们本个CalendarManger例子中，我们需要通过桥接把JavaScript中的事件的时间发送给原生封装的方法，但是我是不能直接通过桥接进行传递JavaScript的时间对象的，所以我们这边需要把时间转换成一个字符串或者数字进行传递。下面我们来看一下实例的方法:
//对外提供调用方法,为了演示事件时间格式化
RCT_EXPORT_METHOD(addEventMore:(NSString *)name location:(NSString *)location data:(NSNumber*)secondsSinceUnixEpoch){
NSDate *date = [RCTConvert NSDate:secondsSinceUnixEpoch];
或者像以下的写法:
RCT_EXPORT_METHOD(addEventMoreTwo:(NSString *)name location:(NSString *)location date:(NSString *)ISO8601DateString)
NSDate *date = [RCTConvert NSDate:ISO8601DateString];
其实我们还可以依靠类型自动转换的原理，跳过手动类型转换的步骤，直接像如下这样写，也是可以的
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSDate *)date)
// Date is ready to use!
接下来我们就可以在JavaScript文件中使用如下两种方法的一种进行调用了
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.getTime()); //把日期以unix时间戳形式传递
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.toISOString()); // // 把日期以ISO-8601的字符串形式传递
以上两种值传递的方法都可以正确的转换成原生平台的NSDate类型,如果传值错误的话，例如:传递Array类型值，会出现红屏幕的错误哦~
随着业务的发展CalendarManager.addEvent的方法会变得越来越复杂，同样参数也会越来越多。很多时候这些参数可能是可选的，在这种情况下面我们需要修改我们的API,可以接受一个事件属性的字典类型，如下代码:
#import "RCTConvert.h"
RCT_EXPORT_METHOD(addEvent:(NSString *)name details:(NSDictionary *)details)
NSString *location = [RCTConvert NSString:details[@"location"]];
NSDate *time = [RCTConvert NSDate:details[@"time"]];
接下来我们在JavaScript中如下进行调用即可:
CalendarManager.addEvent('Birthday Party', {
location: '4 Privet Drive, Surrey',
time: date.getTime(),
description: '...'
(四)实战实例
上面讲了那么多，基本都是概念和流程，现在我们直接演示一个实例让大家看一下，首先看一下封装的原生代码：
CalendarManager.m
ModulesDemo
Created by 江清清 on 16/5/22.
Copyright (C) 2016年 Facebook. All rights reserved.
#import "CalendarManager.h"
#import "RCTConvert.h"
@implementation CalendarManager
//默认名称
RCT_EXPORT_MODULE()
//对外提供调用方法
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){
NSLog(@"Pretending to create an event %@ at %@", name, location);
//对外提供调用方法,为了演示事件时间格式化 secondsSinceUnixEpoch
RCT_EXPORT_METHOD(addEventMore:(NSString *)name location:(NSString *)location data:(NSNumber*)secondsSinceUnixEpoch){
NSDate *date = [RCTConvert NSDate:secondsSinceUnixEpoch];
//对外提供调用方法,为了演示事件时间格式化 ISO8601DateString
RCT_EXPORT_METHOD(addEventMoreTwo:(NSString *)name location:(NSString *)location date:(NSString *)ISO8601DateString)
NSDate *date = [RCTConvert NSDate:ISO8601DateString];
//对外提供调用方法,为了演示事件时间格式化 自动类型转换
RCT_EXPORT_METHOD(addEventMoreDate:(NSString *)name location:(NSString *)location date:(NSDate *)date)
NSDateFormatter *formatter = [[NSDateFormatter alloc] init] ;
[formatter setDateFormat:@"yyyy-MM-dd"];
NSLog(@"获取的事件信息:%@,地点:%@,时间:%@",name,location,[formatter stringFromDate:date]);
//对外提供调用方法,为了演示事件时间格式化 传入属性字段
RCT_EXPORT_METHOD(addEventMoreDetails:(NSString *)name details:(NSDictionary *) dictionary)
NSString *location = [RCTConvert NSString:dictionary[@"location"]];
NSDate *time = [RCTConvert NSDate:dictionary[@"time"]];
NSString *description=[RCTConvert NSString:dictionary[@"description"]];
NSLog(@"获取的事件信息:%@,地点:%@,时间:%@,备注信息:%@",name,location,time,description);
前端JS调用方法如下:
* Sample React Native App
* /facebook/react-native
import React,{
AppRegistry,
Component,
StyleSheet,
TouchableHighlight,
} from 'react-native';
///进行导入NativeModules中的CalendarManger模块
import { NativeModules } from 'react-native';
var CalendarManager = NativeModules.CalendarM
class CustomButton ponent {
render() {
&TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.props.onPress}&
&Text style={styles.buttonText}&{this.props.text}&/Text&
&/TouchableHighlight&
class ModulesDemo extends Component {
render() {
&View style={{marginTop:20}}&
&Text style={styles.welcome}&
封装iOS原生模块实例
&CustomButton text="点击调用原生模块addEvent方法"
onPress={()=&CalendarManager.addEvent('生日聚会', '江苏南通 中天路')}
&CustomButton text="点击调用原生模块addEvent方法"
onPress={()=&CalendarManager.addEventMoreDate('生日聚会', '江苏南通 中天路',)}
&CustomButton text="调用原生模块addEvent方法-传入字段格式"
onPress={()=&CalendarManager.addEventMoreDetails('生日聚会', {
location:'江苏 南通市 中天路',
description:'请一定准时来哦~'
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
backgroundColor: 'white',
padding: 10,
borderWidth:1,
borderColor: '#cdcdcd',
AppRegistry.registerComponent('ModulesDemo', () =& ModulesDemo);
运行效果如下:
(五)最后总结
今天我们主要学习了一下React Native For iOS平台封装原生模块，大家有问题可以加一下群React Native技术交流5群().或者底下进行回复一下。 本文章实例项目地址
尊重原创，未经授权不得转载：From Sky丶清（） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
在线用户: 3今日访问: 12,749昨日访问: 4,360累计访问: 2,492,647Custom Calendar
This example shows how to custom the calendar date by using 'formatter' function.
源代码&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Custom Calendar - jQuery EasyUI Demo&/title&
&link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"&
&link rel="stylesheet" type="text/css" href="../../themes/icon.css"&
&link rel="stylesheet" type="text/css" href="../demo.css"&
&script type="text/javascript" src="../../jquery.min.js"&&/script&
&script type="text/javascript" src="../../jquery.easyui.min.js"&&/script&
&h2&Custom Calendar&/h2&
&p&This example shows how to custom the calendar date by using 'formatter' function.&/p&
&div style="margin:20px 0"&&/div&
&div class="easyui-calendar" style="width:250height:250" data-options="formatter:formatDay"&&/div&
var d1 = Math.floor((Math.random()*30)+1);
var d2 = Math.floor((Math.random()*30)+1);
function formatDay(date){
var m = date.getMonth()+1;
var d = date.getDate();
var opts = $(this).calendar('options');
if (opts.month == m && d == d1){
return '&div class="icon-ok md"&' + d + '&/div&';
} else if (opts.month == m && d == d2){
return '&div class="icon-search md"&' + d + '&/div&';
&style scoped="scoped"&
line-height:16
background-position:2
text-align:
font-weight:
padding:0 2Mobile App Development
Digital Content & Experience
Software Quality
Individual Products
HTML5/JS Framework
PRODUCTIVITY & QUALITY
Reporting & Data Access
DEPLOYMENT
Mobile App Development
Digital Content & Experience
Localization
Support for different cultures is critical to mobile apps. The Telerik Android Calendar can either inherit the default device culture or use a custom one provided by the developer.
Single, Multiple and Range Date Selection
RadCalendar covers various selection scenarios enabling users to select a single date, multiple dates or a range of dates.
Calendar Views
The Telerik Android Calendar features week, month and year views.
Special and Disabled Dates
The Calendar for Android allows setting a restriction on the dates that are visible and selectable. It also allows you to customize each cell depending on the date it represents. This can be used to make the weekends red or to add a birthday cake on the date of your birthday.
Support for Events
As you&d expect the Telerik Android Calendar allows displaying events and appointments in your app, which are color-coded and very easy to create.
Inline Events for the Calendar Control
You have full control over the customization of events when using the inline display mode. You can change the event&s background color, title text size, the color of the start and end time as well as the text size of the start and end time.
Next Steps
Try Telerik UI for Android with dedicated support.
Get started developing with Telerik UI for Android.
Get off to a fast start with the product.
Get Products
Recognition
TELERIK BY PROGRESS
USA: +1 888 365 2779
UK: +44 20
India: +91 124 4300987
Germany: +49 89
Bulgaria: +359 2 8099850
Australia: +61 3
Copyright & 2016, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See
or appropriate markings.
Powered byHelping you find creative electricity on your Mac
How to create a custom calendar in Photos for Mac
A calendar is a great way to enjoy your favorite photos. And it also makes for a great gift.
Contributor, Macworld
There’s nothing like printing your own photography, though adorning your walls with your own art can be intimidating. A safe way to print—and thus enjoy—your digital memories is to create a calendar in . At 13 by 10.4 inches, Apple’s calendars are big and printed on thick, high-quality paper so they look better than the ones you get anywhere else. They’re stunning and they make great gifts.
The calendars you create in Photos can be customized in myriad ways. You can choose from a variety of themes, customize the look of each page, add captions, national holidays, pull events from your Calendar app, and plop pictures onto individual date squares (great for birthdays!). You’re not stuck with a 12-month calendar either—you can include up to 24 months if you wish, and you don’t have to start with January. Apple’s calendars are also affordable: a 12-month calendar costs $20 (add $1.49 for each additional month). This column walks you through the process of creating own. (Creating a calendar in iPhoto is a .)
Step 1: Pick the pictures
Unless you want one picture per page, start your calendar with 25 to 35 pictures in an album made specifically for this project. In the album, drag to reorder the pictures, however, you want them to appear in the calendar (else Photos flows them into the calendar chronologically according to capture date). But if you prefer, you can also start the project by selecting a Collection or Moment, individual thumbnails or even multiple albums (by Shift or Command-clicking).
To include all the images in an album, open it and then create the project. That way, you don’t have to select the images. Here the calendar is based on the Favorites album.
Step 2: Choose the length, start date, and theme
Click the + button in Photos’ toolbar, or the one that appears when you point your cursor at the upper right of thumbnails in Collections or Moments view, and choose Calendar (you can also choose File & Create Calendar). In the resulting screen, pick the number of months you want and the start date. Click Continue and you see a list of themes. Photos hops online to see if Apple has added any new ones (those thumbnails have a tiny cloud icon at lower right). Double-click the theme you like and, if necessary, Photos downloads it, plops your pictures into it and deposits you in All Pages view, which gives you a satisfying sense of what your calendar will look like (the Big Date theme was used here).
All Pages view lets you reorder pages, and, unlike iPhoto, swap images between picture frames and change page layouts.
If you want to experiment with other themes, now’s the time. It’s best to settle on a theme before you start customizing each page, or else all your design work flies out the window. To do it, click Settings in Photos’ toolbar (circled here). In the resulting pane, you can change themes, calendar length, start date, and a slew of other options, as this screenshot illustrates.
The Settings panel is available in both All Pages and Single Page view and lets you change key settings for your calendar project.
Step 3: Customize pages
While you’re in All Pages view, you can rearrange the pages as well as the images they contain. To move a page, point your cursor at it and then click and hold down your mouse button atop the gray rectangular icon that appears beneath it. When the page pops off the workspace, drag the selected page atop the page in the desired location. When the page in the target location dims, release your mouse button and Photos moves the selected page to its new home, as shown here.
In Photos, you move pages by dragging them atop another page, rather than dragging them between pages.
To move pictures around, click an image and hold your mouse button down until the picture pops out of the frame, and then drag it atop another frame. If Photos wasn’t able to place all the pictures you began the project with, they appear in the Photos drawer at the bottom of the window where you can drag them onto pages yourself. To remove a picture from a page, drag it to the Photos drawer. If you prefer to place the pictures yourself, click Clear Placed Photos and all the pictures in your project are moved to the Photos drawer. To add more pictures to your calendar project, click the Add Photos button at lower right and then click to select the images you want to add.
In this image, two pictures are being swapped between pages.
To change the number of pictures per page, and their arrangements, or to change the background color of a page, activate the page and then open the Layout Options panel by clicking the button circled here. Scroll to find the layout you want and click its thumbnail to apply it. If the layout you pick supports a background color, use the swatches at the bottom of the panel to change it.
The Layouts panel lets determine how many pictures appear on the page (usually 1-7) and whether there’s room for captions or not.
Step 4: Customize picture positioning and captions
To fiddle with how individual pictures appear in their frames, and to customize text, double-click a page to enter Single Page view. That’s where you can change a picture’s zoom level and positioning, apply a filter, or open it in Edit mode. Click the picture you want to change and, if the Options panel isn’t open, double-click the image, click the Options button beneath the page, or click the Options button in Photos’ toolbar (circled here).
Once you use the Zoom & Crop slider to zoom into an image, you can click and drag within the image to alter its position within the frame.&
To edit your calendar’s title and captions, click the placeholder text and then type away. The Text Options panel automatically opens, letting you change the font, size, style, color, and alignment. To add custom text to a date square, click the square and a text box appears.
When you click to activate text, the Options panel automatically switches to text formatting.
For even more creativity, add a picture to a date square. Simply drag a picture from the Photos drawer onto a date square to mark a birthday, anniversary, graduation or other personal event.
Once you add a picture to a date square, use the Caption menu to determine the caption’s location.
To edit a different month, click the left or right-pointing arrows on either side of the calendar page, or use the arrow keys on your keyboard. To return to All Pages view, click the back button at the upper left of Photos’ toolbar.
Step 5: Final inspection
To proof your calendar, choose File & Print. Then either print it or export it as a PDF using the PDF menu at the bottom left of the Print dialog. And for goodness’ sake, remember to spell check your calendar by choosing Edit & Spelling and Grammar. Typos on a calendar are worse than typos in a book because you have to stare at them for a whole month!
Step 6: Buy the calendar
When you click the Buy Calendar at the upper right of the Photos window, the program examines your calendar for problems such as placeholder text, placeholder pictures, and text that’s too long to fit in its box. If Photos encounters any of these issues, it alerts you and lets you fix it—just keep clicking Buy Calendar until you run out of error messages.
As you can see, it’s easy to create a gorgeous calendar in Photos. But be warned: when you give custom calendars to loved ones, there’ they’ll expect them yearly. Until next time, may the creative force be with you all!
founder Lesa Snider is the author of , , and over . She also writes the
for Photoshop User magazine.More by
recommended for you
Subscribe to the Best of Macworld Newsletter
Use commas to separate multiple email addresses
How-To Videos
Subscribe to the Best of Macworld Newsletter
White Paper
Video/WebcastSponsored
Sponsored Links