前言
React-Native从诞生至今，火热程度已经不言而喻，在不断的框架迭代过程中，RN也提供了丰富的组件，以供开发者使用，但是在实际应用中，我们可能需要更为丰富的交互组件，但是RN中又没有及时提供，这时候我们就需要使用RN的本地模块，本地模块即可以使用JS调用Native，也可以使用Native调用JS, 并传递各种参数，实现完整功能，接下来我们看看具体的使用方法，方便大家参考学习，如果想了解更多，我们可以查阅官方的文档。
下面文章中，我会经常用到RN，即为React Native的缩写，请见谅。
类库及模块组件
1.RCTBridgeModule
- RCTBridgeModule
在React Native中，如果实现一个原生模块，需要实现RCTBridgeModule”协议，其中RCT就是ReaCT的缩写。
- RCT_EXPORT_MODULE()
如果我们实现了RCTBridgeModule协议，我们的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。
- RCT_EXPORT_METHOD()
与此同时我们需要声明RCT_EXPORT_METHOD()宏来实现要给Javascript导出的方法，否则React Native不会导出任何方法。
- RCT_REMAP_METHOD()
React Native还定义了一个RCT_REMAP_METHOD()宏，它可以指定Javascript方法名， 当许多方法的第一部分相同的时候用它来避免在Javascript端的名字冲突。
2.NativeModules
在Javascript中如果想调用Native的方法，需要使用RN提供的NativeModules模块，具体代码实例中会给出。
3.NativeAppEventEmitter
这是一个事件监听处理的方法，应用在JS中，可以监听到native调用的事件以及参数。
起步（Hello World…）
现在开始我们简单来写一个例子，就是利用JS调用Native方法，并打印Hello World。
创建native文件（OC）
HelloWorld.h
#import <React/RCTBridgeModule.h>
@interface HelloWorld : NSObject<RCTBridgeModule>
@end这里主要实现一个协议RCTBridgeModule, IOS中的协议和Java中的接口概念非常相似。这个协议由RN提供。在RN 0.40版本以后，引入方式发生了改变
#import "HelloWorld.h"
@implementation HelloWorld
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(sayHello:(NSString *) msg)
{
NSLog(@"打印Hello World%@",msg);
}
@end
.m文件中实现了两个宏，用于声明javascript调用的方法。RCT_EXPORT_MODULE()这个文件中，我们可以不指定名字，会默认使用class名字。
JS文件：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
NativeModules
} from 'react-native';
export default class NativeModuleDemo extends Component {
onPress(){
let HelloWorld = NativeModules.HelloWorld;
HelloWorld.sayHello('Hello World你好');
}
render() {
return (
<View style={{marginTop:40}}>
<Button onPress={this.onPress.bind(this)} title="Say Hello" />
</View>
);
}
}
AppRegistry.registerComponent('NativeModuleDemo', () => NativeModuleDemo);此文件是JS文件，首先要引入NativeModules模块，用于调用native方法。
核心代码主要是下面部分，获取native模块，然后调用sayHello方法，传递参数。
let HelloWorld = NativeModules.HelloWorld;
HelloWorld.sayHello('Hello World你好');特殊参数的传递
上面的例子中我们传递了一个简单的string类型，但是实际应用中会有多种复杂的类型，比如枚举，比如日期时间类型等等，为此我们看看RN Bridge给我们提供了哪些类型参数：
- string (NSString)
- number (NSInteger, float, double, CGFloat, NSNumber)
- boolean (BOOL, NSNumber)
- array (NSArray) 包含本列表中任意类型
- object (NSDictionary) 包含string类型的键和本列表中任意类型的值
- function (RCTResponseSenderBlock)
奇怪，没有时间和枚举类型，那该怎么办？
还好，在RN中提供了一个RCTConvert库，帮助我们进行类型转换，具体来看看代码：
创建MyDate.h
#import <React/RCTBridgeModule.h>
#import <React/RCTConvert.h>
@interface MyDate : NSObject<RCTBridgeModule>
@end这里主要引用了RCTConvert类库，进行转换。
实现MyDate.m
#import "MyDate.h"
@implementation MyDate
RCT_EXPORT_MODULE();
RCT_REMAP_METHOD(printDate, date1:(nonnull NSNumber *)d1 date2:(nonnull NSNumber *)d2)
{
NSDate* dt1 = [RCTConvert NSDate:d1];
NSDate* dt2 = [RCTConvert NSDate:d2];
NSComparisonResult result = [dt1 compare:dt2];
switch(result){
case NSOrderedAscending:
{
NSLog(@"比较结果%@",@"开始时间小于结束时间");
}
case NSOrderedDescending:
{
NSLog(@"比较结果%@",@"开始时间大于结束时间");
}
}
}
@endJS文件实现：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
DatePickerIOS,
NativeModules
} from 'react-native';
export default class NativeModuleDemo extends Component {
constructor(){
super();
this.state = {startDate: new Date(), endDate: new Date()};
}
onPress(){
let HelloWorld = NativeModules.HelloWorld;
HelloWorld.sayHello('Hello World你好');
}
onPressDateValidation() {
var myDate = NativeModules.MyDate;
myDate.printDate(this.state.startDate.getTime(), this.state.endDate.getTime());
}
onStartDateChange(date) {
this.setState({startDate: date});
}
onEndDateChange(date) {
this.setState({endDate: date});
}
render() {
return (
<View style={{marginTop:40}}>
<DatePickerIOS
date={this.state.startDate}
mode='date'
onDateChange={this.onStartDateChange.bind(this)} />
<DatePickerIOS
date={this.state.endDate}
mode='date'
onDateChange={this.onEndDateChange.bind(this)} />
<Button onPress={this.onPressDateValidation.bind(this)} title="Say Hello" />
</View>
);
}
}
AppRegistry.registerComponent('NativeModuleDemo', () => NativeModuleDemo);这里RCTConvert可以转换很多类型，比如字典类型：
NSString* str = [RCTConvert NSString:details[@"key"]];
回调函数的使用
套用上边的例子，我们只需要更改.m实现文件即可：
#import "MyDate.h"
@implementation MyDate
RCT_EXPORT_MODULE();
RCT_REMAP_METHOD(printDate, date1:(nonnull NSNumber *)d1 date2:(nonnull NSNumber *)d2 event:(RCTResponseSenderBlock)callback)
{
NSDate* dt1 = [RCTConvert NSDate:d1];
NSDate* dt2 = [RCTConvert NSDate:d2];
NSComparisonResult result = [dt1 compare:dt2];
switch(result){
case NSOrderedAscending:
{
NSLog(@"比较结果%@",@"开始时间小于结束时间");
}
case NSOrderedDescending:
{
NSLog(@"比较结果%@",@"开始时间大于结束时间");
}
}
NSArray *events = [NSArray arrayWithObjects:@"测试结果",nil];
callback(@[[NSNull null], events]);
}
@end这里主要应用了：
event:(RCTResponseSenderBlock)callback
....
callback(@[[NSNull null], events]);callback返回的是一个数组，这里要切记，第一个为错误信息。
JS实现：
onPressDateValidation() {
var myDate = NativeModules.MyDate;
myDate.printDate(this.state.startDate.getTime(), this.state.endDate.getTime(), (err, result) => {
alert(result);
});
}效果：
Promises回调处理
原生模块还可以使用promise来简化代码，搭配ES2016(ES7)标准的async/await语法则效果会更好理解，而且更为简单。
主要原理为最后两个参数是RCTPromiseResolveBlock和RCTPromiseRejectBlock，则对应的JS方法就会返回一个Promise对象。
我们把上面的代码用promise来代替回调进行重构：
套上上边代码，我们更改MyDate.m文件：
#import "MyDate.h"
@implementation MyDate
RCT_EXPORT_MODULE();
RCT_REMAP_METHOD(printDate, date1:(nonnull NSNumber *)d1 date2:(nonnull NSNumber *)d2 resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
NSDate* dt1 = [RCTConvert NSDate:d1];
NSDate* dt2 = [RCTConvert NSDate:d2];
NSComparisonResult result = [dt1 compare:dt2];
switch(result){
case NSOrderedAscending:
{
NSLog(@"比较结果%@",@"开始时间小于结束时间");
}
case NSOrderedDescending:
{
NSLog(@"比较结果%@",@"开始时间大于结束时间");
}
}
NSArray *events = [NSArray arrayWithObjects:@"测试结果",nil];
if (events) {
resolve(events);
} else {
reject(@"",@"",nil);
}
}
@endJS文件更改：
async onPressDateValidation() {
var myDate = NativeModules.MyDate;
var result = await myDate.printDate(this.state.startDate.getTime(), this.state.endDate.getTime());
alert(result);
}Native单向调用JS方法
新建MyCallBack.h MyCallBack.m文件, 这里引入RCTEventDispatcher 类库用于处理事件回调。
MyCallBack.m
#import "MyCallBack.h"
#import <React/RCTEventDispatcher.h>
@implementation MyCallBack
RCT_EXPORT_MODULE();
@synthesize bridge = _bridge;
RCT_REMAP_METHOD(checkCallBack, str:(NSString *)str)
{
[self.bridge.eventDispatcher sendAppEventWithName:@"EventCallBack" body:@{@"name": @"sad"}];
}
@end首先需要用到synthesize方法，同步一个参数变量_bridge，主要代码如下：
[self.bridge.eventDispatcher sendAppEventWithName:@"EventCallBack" body:@{@"name": @"sad"}];sendAppEventWithName必须和JS中保持一致。
JS中注册监听事件：
this.state = {startDate: new Date(), endDate: new Date()};
var subscription = NativeAppEventEmitter.addListener(
'EventCallBack',
(reminder) => alert(reminder.name)
);这里我们需要从RN中引入NativeAppEventEmitter， 用于创建监听事件。
千万不要忘记忘记取消订阅, 通常在componentWillUnmount函数中实现。
常量枚举类型的导出事件
在Naive开发中我们应用到了丰富的变量类型，那么RN中如何能应用到Native的部分数据类型呢？比如枚举，常量？
1.常量
原生模块可以导出一些常量，这些常量在JavaScript端随时都可以访问。
用这种方法来传递一些静态数据，可以避免通过bridge进行一次来回交互。
- (NSDictionary *)constantsToExport
{
return @{ @"firstDayOfTheWeek": @"Monday" };
}上面constantsToExport为复写的方法，名字不可更改，否则无法调用。
JS使用：
console.log(MyDate.firstDayOfTheWeek);
2.枚举：
用NS_ENUM定义的枚举类型。
#import "EnumConstants.h"
typedef NS_ENUM(NSInteger, UIStatusBarAnimation) {
UIStatusBarAnimationNone,
UIStatusBarAnimationFade,
UIStatusBarAnimationSlide,
};
@implementation EnumConstants
RCT_EXPORT_MODULE();
- (NSDictionary *)constantsToExport
{
return @{ @"statusBarAnimationNone" : @(UIStatusBarAnimationNone),
@"statusBarAnimationFade" : @(UIStatusBarAnimationFade),
@"statusBarAnimationSlide" : @(UIStatusBarAnimationSlide) };
};
@endJS使用：
onPressForEnum() {
let enumConstants = NativeModules.EnumConstants;
alert(enumConstants.statusBarAnimationFade);
}线程的应用
首先我们创建一个MyThread 类， 复写methodQueue方法， 如果返回dispatch_get_main_queue，即为调用主线程。
#import "MyThread.h"
@implementation MyThread
RCT_EXPORT_MODULE()
- (dispatch_queue_t)methodQueue
{
return dispatch_get_main_queue();
}
RCT_REMAP_METHOD(doInThread, date1:(nonnull NSNumber *)d1 callback:(RCTResponseSenderBlock)callback)
{
...
}
@end类似的，如果一个操作需要花费很长时间，原生模块不应该阻塞住，而是应当声明一个用于执行操作的独立队列。
- (dispatch_queue_t)methodQueue
{
return dispatch_queue_create("com.facebook.React.AsyncLocalStorageQueue", DISPATCH_QUEUE_SERIAL);
}如果你的方法中“只有一个”是耗时较长的（或者是由于某种原因必须在不同的队列中运行的），你可以在函数体内用dispatch_async方法来在另一个队列执行，而不影响其他方法：
RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSenderBlock)callback)
{
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
// 在这里执行长时间的操作
...
// 你可以在任何线程/队列中执行回调函数
callback(@[...]);
});
}上面代码示例，参考官方文档！更多信息大家可以自行查阅！
总结
总体来讲，RN的提供给开发者的桥接口比较完善，方便了调用，在实际项目中应用也比较流畅。
时代的高歌在唱响，科技的浪潮在迈进，移动的时代在变革，不论未来如何，作为RN的追随者， 希望今后能提供更为完善的接口组件。
接下来，就到你了，试试吧！