RN 开发过程中，很多功能还是需要由原生来实现，比如支付、分享等，这就需要在 RN 中调用 OC 的方法，或者 OC 里调用 RN 的方法。
RN.gif
一、RN 直接调用 OC 方法
1、新建一个类，导入React/RCTBridgeModule.h头文件，并遵循RCTBridgeModule协议。
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface RNHelper : NSObject <RCTBridgeModule>
@end
2、实现方法
#import "RNHelper.h"
@implementation RNHelper
@synthesize bridge = _bridge;
// 可添加参数以指定 RN 访问 OC 的模块名，默认为类名
RCT_EXPORT_MODULE();
// test 为 RN 中调用的方法名
RCT_EXPORT_METHOD(test) {
NSLog(@"我是 OC 中的方法");
}
@end
3、调用该方法
导入NativeModules模块，并引入 OC 中的类
import { NativeModules } from 'react-native';
var helper = NativeModules.RNHelper;
比如加一个按钮，点击调用，样式就自己随意写吧
<TouchableOpacity style={styles.btn} onPress={this.test.bind(this)}>
<Text style={{color: 'white'}}>调用 OC 方法</Text>
</TouchableOpacity>
实现这个方法
test() {
helper.test();
}
直接调用 OC 方法.png
如此便能调用 OC 中的方法了
二、RN 向 OC 方法传值，并监听 OC 事件
比如之前应用Ping++完成过支付功能，RN 没有对应的库，只能把要支付的charge对象传递到 OC 方法中进行支付，再将支付结果返回给 RN。
因为这里的方法只能写成void类型的，也就是不能带返回值，所以需要通过监听或者回调来实现，先来看监听。
1、先实现 OC 里的方法
导入头文件
#import <React/RCTEventDispatcher.h>
实现方法，并设置事件名与传递的参数
RCT_EXPORT_METHOD(payCharge:(NSDictionary *)charge) {
NSLog(@"%@", charge);
NSDictionary * dict = @{@"message": @"支付完成"};
[self.bridge.eventDispatcher sendAppEventWithName:@"payResult" body:dict];
}
2、RN 中导入NativeAppEventEmitter，并在componentWillMount中添加监听
import { NativeAppEventEmitter } from 'react-native';
componentWillMount() {
this.listenPayResult = NativeAppEventEmitter.addListener('payResult', function(param) {
if (param.message) {
alert(param.message);
}
});
}
3、调用该方法
设置个按钮，点击调用
<TouchableOpacity style={styles.btn2} onPress={this.payCharge.bind(this)}>
<Text style={{color: 'white'}}>监听 OC 事件</Text>
</TouchableOpacity>
实现该方法
payCharge() {
var charge = {
'price': 100
}
helper.payCharge(charge);
}
4、不可或缺的一步 —— 移除监听
离开当前页面时要将监听移除，否则会有内存问题
componentWillUnmount() {
this.listenPayResult.remove();
}
传参并监听.png
三、回调
RN 与 OC 交互也可通过回调方式来实现，比如某些app会有一个说明页，显示当前的版本信息等，RN 中是无法获取，同样要调用 OC 方法，这里可以将得到的版本号回调出去。
1、先实现 OC 中方法
RCT_EXPORT_METHOD(getVersionInfo:(RCTResponseSenderBlock)callback) {
NSDictionary * infoDict = [[NSBundle mainBundle] infoDictionary];
NSString * appCurVersion = [infoDict objectForKey:@"CFBundleShortVersionString"];
callback(@[[NSNull null], appCurVersion]);
}
2、RN 调用该方法，并获取回调信息
设置个按钮，点击调用
<TouchableOpacity style={styles.btn3} onPress={this.getVersionInfo.bind(this)}>
<Text style={{color: 'white'}}>获取 OC 回调</Text>
</TouchableOpacity>
实现该方法
getVersionInfo() {
helper.getVersionInfo((error, callback) => {
if (callback) {
alert(callback);
}
});
}
通过回调调用 OC 方法.png
一般情况下，通过回调、监听，大部分 RN 和 OC 的交互需求都能满足。
如果看完这篇文章对你有所帮助的话，动动大家发财的小手，点个喜欢 ❤️ 再走吧，想认证一个简书推荐作者，需要 2000 个 ❤️ ，还差 1900 多个 😂
