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

前端之家收集整理的这篇文章主要介绍了React-Native之IOS本地模块的应用实践分享(仅此一篇足以...)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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,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(@"比较结果%@",@"开始时间大于结束时间");
    }
  }
  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(@"比较结果%@",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的追随者, 希望今后能提供更为完善的接口组件。

接下来,就到你了,试试吧!

原文链接:https://www.f2er.com/react/304834.html

猜你在找的React相关文章