(一)iOS日歷模塊封裝演示

下面開始演示如何封裝一個(gè)iOS日歷原生模塊，讓JavaScript可以進(jìn)行訪問到iOS平臺(tái)日歷的功能攒射。

在React Native中斤蔓，原生模塊就是一個(gè)Objective-C類，并且應(yīng)該實(shí)現(xiàn)了RCTBridgeModule協(xié)議遏餐。其中RCT是ReaCT的縮寫霹粥。我們看一下CalendarManger.h官方的代碼:

// CalendarManager.h
#import "RCTBridgeModule.h"
@interface CalendarManager : NSObject <RCTBridgeModule>

@end

為了實(shí)現(xiàn)RCTBridgeModule協(xié)議灭将，你的CalendarManger類.m文件需要實(shí)現(xiàn)RCT_EXPORT_MODULE()宏，該宏有一個(gè)可選的參數(shù)可以設(shè)置指定在JavaScript端進(jìn)行訪問該模塊的名稱(更多細(xì)節(jié)可以往后面繼續(xù)看)后控。如果你這邊沒有設(shè)置該名稱宗侦，那么JavaScript會(huì)默認(rèn)去使用Objective-C類名稱。

到這一步CalendarManager.m文件的配置如下:

#import "CalendarManager.h"

@implementation CalendarManager
RCT_EXPORT_MODULE()
@end

下面就是注入提供給JavaScript調(diào)用的方法忆蚀，該方法必須要使用RCT_EXPORT_METHOD()宏來聲明矾利，不然這些方法JavaScript前端是無法進(jìn)行調(diào)用的〔鐾啵看下面官方的代碼:

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
{
    NSLog(@"Pretending to create an event %@ at %@", name, location);
}

完成以上的步驟,我們就可以從JavaScript端進(jìn)行訪問這個(gè)方法了男旗。具體調(diào)用方式如下:

import { NativeModules } from 'react-native';
var CalendarManager = NativeModules.CalendarManager;
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');

來最終JavaScript中的代碼如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
import React,{
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
} from 'react-native';
///進(jìn)行導(dǎo)入NativeModules中的CalendarManger模塊
import { NativeModules } from 'react-native';
var CalendarManager = NativeModules.CalendarManager;
class CustomButton extends React.Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
class ModulesDemo extends Component {
  render() {
    return (
      <View style={{marginTop:20}}>
        <Text style={styles.welcome}>
            封裝iOS原生模塊實(shí)例
        </Text>
        <CustomButton text="點(diǎn)擊調(diào)用原生模塊addEvent方法"
            onPress={()=>CalendarManager.addEvent('生日聚會(huì)', '江蘇南通 中天路')}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button: {
    margin:5,
    backgroundColor: 'white',
    padding: 10,
    borderWidth:1,
    borderColor: '#cdcdcd',
  },
});
AppRegistry.registerComponent('ModulesDemo', () => ModulesDemo);

點(diǎn)擊按鈕，會(huì)去調(diào)用原生模塊方法欣鳖，并且傳入數(shù)據(jù)打印在控制臺(tái)察皇，效果截圖如下:

22.jpg

[特別注意].JavaScript調(diào)用方法名稱

封裝的原生模塊方法給JavaScript進(jìn)行調(diào)用，通過該方法的名字進(jìn)行調(diào)用泽台。有時(shí)候可能出現(xiàn)同名沖突的問題什荣，在React Native中，還好給我們定義了RCT_REMAP_METHOD()宏來進(jìn)行重置JavaScript調(diào)用的方法名稱怀酷。該宏在多個(gè)原生模塊中可能封裝了同樣的方法名稱非常有用稻爬，可以解決同名沖突問題。

CalendarManager模塊在Objective-C中必須要使用[CalendarManager new]進(jìn)行初始化蜕依，并且該用于橋接調(diào)用的方法的返回值始終為void桅锄。React Native橋接的方法是異步的，所以傳遞一個(gè)返回值給JavaScript只能通過回調(diào)或者發(fā)送事件解決(具體我們會(huì)在后面的文章中講解)样眠。

(二)參數(shù)類型

RCT_EXPORT_METHOD支持所有的標(biāo)準(zhǔn)的JSON對(duì)象類型友瘤，如下:

• string(NSString )

• number(NSInteger,float,double,CGFloat,NSNumber)

• boolean(BOOL,NSNumber)

• array(NSArray) 任何類型的集合

• map(NSDictionary) 字典類型，包括任何類型鍵值對(duì)的集合

• function(RCTResponseSenderBlock) block回調(diào)對(duì)象方法

除此之外檐束，支持RCTConvert類支持的類型也都支持(大家可以查看RCTConvert來了解詳情)辫秧。RCTConvert還提供了一些方法可以把輸入接收的JSON數(shù)據(jù)轉(zhuǎn)換成原生的Objective-C類型或者類。

例如在我們本個(gè)CalendarManger例子中被丧，我們需要通過橋接把JavaScript中的事件的時(shí)間發(fā)送給原生封裝的方法盟戏，但是我是不能直接通過橋接進(jìn)行傳遞JavaScript的時(shí)間對(duì)象的，所以我們這邊需要把時(shí)間轉(zhuǎn)換成一個(gè)字符串或者數(shù)字進(jìn)行傳遞晚碾。下面我們來看一下實(shí)例的方法:

//對(duì)外提供調(diào)用方法,為了演示事件時(shí)間格式化
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];
}

其實(shí)我們還可以依靠類型自動(dòng)轉(zhuǎn)換的原理抓半，跳過手動(dòng)類型轉(zhuǎn)換的步驟，直接像如下這樣寫格嘁，也是可以的

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSDate *)date)
{
  // Date is ready to use!
}

接下來我們就可以在JavaScript文件中使用如下兩種方法的一種進(jìn)行調(diào)用了

CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.getTime()); //把日期以u(píng)nix時(shí)間戳形式傳遞

或者:

CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.toISOString()); // // 把日期以ISO-8601的字符串形式傳遞

以上兩種值傳遞的方法都可以正確的轉(zhuǎn)換成原生平臺(tái)的NSDate類型笛求，如果傳值錯(cuò)誤的話，例如：傳遞Array類型值糕簿，會(huì)出現(xiàn)紅屏幕的錯(cuò)誤探入。

隨著業(yè)務(wù)的發(fā)展CalendarManager.addEvent的方法會(huì)變得越來越復(fù)雜，同樣參數(shù)也會(huì)越來越多懂诗。很多時(shí)候這些參數(shù)可能是可選的蜂嗽，在這種情況下面我們需要修改我們的API，可以接受一個(gè)事件屬性的字典類型殃恒，如下代碼:

#import "RCTConvert.h"
 
RCT_EXPORT_METHOD(addEvent:(NSString *)name details:(NSDictionary *)details)
{
  NSString *location = [RCTConvert NSString:details[@"location"]];
  NSDate *time = [RCTConvert NSDate:details[@"time"]];
  ...
}

接下來我們?cè)贘avaScript中如下進(jìn)行調(diào)用即可:

CalendarManager.addEvent('Birthday Party', {
  location: '4 Privet Drive, Surrey',
  time: date.getTime(),
  description: '...'
})

(三)實(shí)戰(zhàn)實(shí)例

上面講了那么多植旧，基本都是概念和流程辱揭，現(xiàn)在我們直接演示一個(gè)實(shí)例讓大家看一下，首先看一下封裝的原生代碼：

//
//  CalendarManager.m
//  ModulesDemo
//
//  Copyright ? 2016年 Facebook. All rights reserved.
//
 
#import "CalendarManager.h"
#import "RCTConvert.h"
@implementation CalendarManager
//默認(rèn)名稱
RCT_EXPORT_MODULE()
//對(duì)外提供調(diào)用方法
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){
  NSLog(@"Pretending to create an event %@ at %@", name, location);
}
//對(duì)外提供調(diào)用方法,為了演示事件時(shí)間格式化 secondsSinceUnixEpoch
RCT_EXPORT_METHOD(addEventMore:(NSString *)name location:(NSString *)location data:(NSNumber*)secondsSinceUnixEpoch){
   NSDate *date = [RCTConvert NSDate:secondsSinceUnixEpoch];
}
//對(duì)外提供調(diào)用方法,為了演示事件時(shí)間格式化 ISO8601DateString
RCT_EXPORT_METHOD(addEventMoreTwo:(NSString *)name location:(NSString *)location date:(NSString *)ISO8601DateString)
{
  NSDate *date = [RCTConvert NSDate:ISO8601DateString];
}
//對(duì)外提供調(diào)用方法,為了演示事件時(shí)間格式化 自動(dòng)類型轉(zhuǎn)換
RCT_EXPORT_METHOD(addEventMoreDate:(NSString *)name location:(NSString *)location date:(NSDate *)date)
{
   NSDateFormatter *formatter = [[NSDateFormatter alloc] init] ;
  [formatter setDateFormat:@"yyyy-MM-dd"];
   NSLog(@"獲取的事件信息:%@,地點(diǎn):%@,時(shí)間:%@",name,location,[formatter stringFromDate:date]);
}
 
//對(duì)外提供調(diào)用方法,為了演示事件時(shí)間格式化 傳入屬性字段
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(@"獲取的事件信息:%@,地點(diǎn):%@,時(shí)間:%@,備注信息:%@",name,location,time,description);
 
}
@end

前端JS調(diào)用方法如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
import React,{
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
} from 'react-native';
///進(jìn)行導(dǎo)入NativeModules中的CalendarManger模塊
import { NativeModules } from 'react-native';
var CalendarManager = NativeModules.CalendarManager;
class CustomButton extends React.Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
class ModulesDemo extends Component {
  render() {
    return (
      <View style={{marginTop:20}}>
        <Text style={styles.welcome}>
            封裝iOS原生模塊實(shí)例
        </Text>
        <CustomButton text="點(diǎn)擊調(diào)用原生模塊addEvent方法"
            onPress={()=>CalendarManager.addEvent('生日聚會(huì)', '江蘇南通 中天路')}
        />
        <CustomButton text="點(diǎn)擊調(diào)用原生模塊addEvent方法"
            onPress={()=>CalendarManager.addEventMoreDate('生日聚會(huì)', '江蘇南通 中天路',1463987752)}
        />
        <CustomButton text="調(diào)用原生模塊addEvent方法-傳入字段格式"
            onPress={()=>CalendarManager.addEventMoreDetails('生日聚會(huì)', {
              location:'江蘇 南通市 中天路',
              time:1463987752,
              description:'請(qǐng)一定準(zhǔn)時(shí)來哦~'
            })}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button: {
    margin:5,
    backgroundColor: 'white',
    padding: 10,
    borderWidth:1,
    borderColor: '#cdcdcd',
  },
});
AppRegistry.registerComponent('ModulesDemo', () => ModulesDemo);

打個(gè)小廣告：這是我正在擼的RN項(xiàng)目病附，目前完成的有網(wǎng)易新聞问窃、美團(tuán)>>>，還會(huì)繼續(xù)添加一些功能完沪，希望支持~~~