学习笔记:RN-原生交互方案

时间:2021-6-12 作者:qvyue

一、iOS端交互

1、iOS调用JavaScript方法

1.1、原生端

  • 新建桥连类,继承于RCTEventEmitter.

  • 并且在- (NSArray *)supportedEvents声明JS方法,即将要要调用的JS方法名;

  • 使用self.bridge实例方法enqueueJSCall:method:args:completion:调用js方法。
    也可以调用sendEventWithName:body:方法,其内部实现也是调用enqueueJSCall:@"RCTDeviceEventEmitter" method:@"emit" args:body ? @[ eventName, body ] : @[ eventName ] completion:NULL

  • 初始化侨联类实例的时候,必须指定bridge.

@interface RNConnectManager : RCTEventEmitter
- (void)startLogin;
@end

#define JSFuncEventLogin @"EventLogin"

@implementation RNConnectManager

- (NSArray *)supportedEvents {
  return @[JSFuncEventLogin];
}

- (void)startLogin {
  [self.bridge enqueueJSCall:@"RCTDeviceEventEmitter"
                      method:@"emit"
                        args:@[JSFuncEventLogin]
                  completion:NULL];
}
@end

/* 初始化交互类 */ 
self.rnConector = [[RNConnectManager alloc] init];
self.rnConector.bridge = bridge; // 必须制定bridge
[self.rnConector startLogin]; // 调用

1.2、前端

  • 导入NativeEventEmitter模块,用于监听原生调用方法回调。
  • 初始化NativeEventEmitter 的发射器实例。
  • 注册方法,开始监听调用。
  • 注意,不用的时候,一定要把对应监听移除,例如在组件销毁时候。
import { NativeEventEmitter } from 'react-native';

// 初始化监听器
const NativeConnectorEmitter = new NativeEventEmitter(NativeModules.ReactConnector);

 // 监听方法
eventLoginSubscription = NativeConnectorEmitter.addListener('EventLogin', () => {
  alert('EventLogin');
});

// 适当的时候移除方法
eventLoginSubscription.remove();

2、js调用iOS原生方法

2.1、原生端

  • 侨连类实现RCTBridgeModule协议。
  • 使用宏RCT_EXPORT_MODULE(xxx); ,宏传入参数,设置前端使用名称。
  • 导出桥连类,RCT_EXPORT_METHOD导出方法,使用RCTResponseSenderBlock可以定义回调函数。
@interface RNConnectManager : RCTEventEmitter 
@end

@implementation RNConnectManager
/**
 1、必须:向RN导出该模块
 */
RCT_EXPORT_MODULE(ReactConnector);


/**
 2、必须:声明要给 JavaScript 导出的方法。
 */
RCT_EXPORT_METHOD(callNativeFunc:(NSString *)msg)
{
  NSLog(@"%@", msg);
}

RCT_EXPORT_METHOD(callNativeWithCallBackFunc:(NSString *)msg callback:(RCTResponseSenderBlock)callback)
{
  NSLog(@"%@", msg);
  callback(@[@"ok i got it"]);
}
@end

2.2、前端

  • 导入NativeModules,使用模块
import { NativeModules } from 'react-native';

// ReactConnector是RCT_EXPORT_MODULE宏指定的名称
const NativeConnector = NativeModules.ReactConnector;

// 调用无回调函数
NativeConnector.callNativeFunc('nihao native, i`m react native.');

// 调用有回调函数
NativeConnector.callNativeWithCallBackFunc('nihao native, i`m react native.', (data) => {
  alert(data);
})

二、Android端交互

有待学习,后续补充…

参考

React Native与iOS交互汇总
RN中文-iOS 原生模块

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。