React-Native之IOS本地模块的应用实践分享（仅此一篇足以...）

Posted 2020-08-31 天外野草

前言

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(@"比较结果%@",@"开始时间大于结束时间");
    }
  }

}
@end

JS文件实现：

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);
  }
}
@end

JS文件更改：

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) };
};

@end

JS使用：

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的追随者， 希望今后能提供更为完善的接口组件。

接下来，就到你了，试试吧！