React Native在原生和React Native间通信

Posted 2022-01-03 xjf125

一、从React Native中调用原生方法（原生模块）

　　原生模块是JS中也可以使用的Objective-C类。一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的。他们可以导出任意的函数和常量给React Native。相关细节可以参阅这篇文章。

　　在React Native中，一个“原生模块”就是一个实现了“RCTBridgeModule”协议的Objective-C类，其中RCT是ReaCT的缩写。

// CalendarManager.h
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>

@interface CalendarManager : NSObject <RCTBridgeModule>
@end

　　为了实现RCTBridgeModule协议，你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。

// CalendarManager.m
@implementation CalendarManager

RCT_EXPORT_MODULE();

@end


//支付宝支付
RCT_EXPORT_METHOD(onAliPay:(NSString *)orderString  resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) 
  //模块代码  

　　现在从Javascript里可以这样调用这个方法：

import 
    NativeModules
 from ‘react-native‘;
var pay = NativeModules.ReactNativePay;

 Pay.onAliPay(payStr) .then((message)=>
      console.log("message" + message); if(message !== "")
        //支付成功的处理
      this.refs.toast.show(message, DURATION.LENGTH_SHORT);
    ) .catch(e=>
      console.log("e.message" + e.message);
      if(e.message !== "") this.refs.toast.show(e.message, DURATION.LENGTH_SHORT);
      if(e.code === ‘-1‘ || e.message === ‘支付失败‘) 
        //支付失败
      
    )

　　注意: 导出到Javascript的方法名是Objective-C的方法名的第一个部分。React Native还定义了一个RCT_REMAP_METHOD()宏，它可以指定Javascript方法名。当许多方法的第一部分相同的时候用它来避免在Javascript端的名字冲突。

二、参数类型

　　RCT_EXPORT_METHOD 支持所有标准JSON类型，包括：

• string (NSString)
• number (NSInteger, float, double, CGFloat, NSNumber)
• boolean (BOOL, NSNumber)
• array (NSArray) 包含本列表中任意类型
• object (NSDictionary) 包含string类型的键和本列表中任意类型的值
• function (RCTResponseSenderBlock)

　　除此以外，任何RCTConvert类支持的的类型也都可以使用(参见RCTConvert了解更多信息)。RCTConvert还提供了一系列辅助函数，用来接收一个JSON值并转换到原生Objective-C类型或类。如下：

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(nonnull NSNumber *)secondsSinceUnixEpoch)

  NSDate *date = [RCTConvert NSDate:secondsSinceUnixEpoch];


或

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSString *)ISO8601DateString)

  NSDate *date = [RCTConvert NSDate:ISO8601DateString];

三、回调函数

　　原生模块还支持一种特殊的参数——回调函数。它提供了一个函数来把返回值传回给JavaScript。如下：

typedef void (^RCTResponseSenderBlock)(NSArray *response);

typedef void (^RCTResponseErrorBlock)(NSError *error);

typedef void (^RCTPromiseResolveBlock)(id result);

typedef void (^RCTPromiseRejectBlock)(NSString *code, NSString *message, NSError *error);