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

一、iOS端交互

1、iOS调用JavaScript方法

1.1、原生端

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

• 并且在- (NSArray<NSString *> *)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<NSString *> *)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 <RCTBridgeModule>
@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 原生模块